---
title: Cardholder
description: A Cardholder utilizes CSS grid or flexbox to create a responsive card grid that adapts to available space.
---
Cardholders may be used to display any type of content, but [Cards](/components/cards/) are recommended.
## Cardholder Grid
Cardholder Grid uses CSS Grid. Cardholder slots are _not_ required.
Columns will always be equal width and aligned.
```html
```
### Cardholder Grid examples
There are several modifiers for the Cardholder Grid that controls the Cardholder columns and gaps:
`.env-cardholder-grid--N` - where N is a number that controls how many slots
the Cardholder will display at most in one row.
Possible values for N are `2`, `3`, `4`, `5`, `6`, `8`.
`.env-cardholder-grid--column-large` - Larger columns (×1.25)
`.env-cardholder-grid--column-small` - Smaller columns (×0.75)
`.env-cardholder-grid--gap-large` - Larger column gap (×2)
`.env-cardholder-grid--gap-small` - Smaller column gap (×0.5)
`.env-cardholder-grid--gap-none` - No column gap
To further adjust the size and spacing of the columns there are two CSS variables that may be set:
```CSS
.your-cardholder-grid-container {
/*
column-width is used to auto fit columns.
*/
--env-cardholder-grid-column-width: 20em;
--env-cardholder-grid-gap: var(--env-spacing-medium);
}
```
Below are a few examples that you may resize and see how the columns adapt to the given space.
Default Cardholder Grid
.env-cardholder-grid
Six columns
.env-cardholder-grid.env-cardholder-grid--6
Small column width
.env-cardholder-grid.env-cardholder-grid--column-small
Large column width
.env-cardholder-grid.env-cardholder-grid--column-large
Large column gap
.env-cardholder-grid.env-cardholder-grid--gap-large
Small column gap
.env-cardholder-grid.env-cardholder-grid--gap-small
No column gap
.env-cardholder-grid.env-cardholder-grid--gap-none
Combined modifiers
Small column width, large column gap, 8 columns max
## Flexbox Cardholder
A Cardholder will use flexbox to make a grid of Cards that adapt to the given space.
Use one `env-cardholder__slot` to hold each Card. See configuration options below.
```html
Lorem Ipsumsson
Utvecklare
```
### Cardholder examples
There are several modifiers for the Cardholder that controls the Cardholder slots:
`.env-cardholder--N` - where N is a number that controls how many slots
the Cardholder can display at most in one row.
Possible values for N are `2`, `3`, `4`, `5`, `6`, `8`.
`.env-cardholder--max` - By default, slots have no max width. This modifier sets a max width.
Slots will be centered in the last row and may not align to the columns. On small screens, the slots
may not fill the entire screen width.
`.env-cardholder--start` - Must be combined with `.env-cardholder--max`. Will align slots to the left.
To control the size and spacing of the columns there are three CSS variables that may be set:
```CSS
.your-cardholder-container {
/*
min-width is used to control when column count breakpoints occur.
max-width is only used when modifier env-cardholder--max is set.
*/
--env-cardholder-column-min-width: 240px;
--env-cardholder-column-max-width: 400px;
--env-cardholder-column-spacing: var(--env-spacing-medium);
}
```
Below are a few examples that you may resize and see how the columns adapt to the given space.
Three columns
.env-cardholder.env-cardholder--3
Five columns
.env-cardholder.env-cardholder--5
Five columns, slot max width
.env-cardholder.env-cardholder--5.env-cardholder--max
Five columns, slot max width, aligned left
.env-cardholder.env-cardholder--5.env-cardholder--max.env-cardholder--start
