# With callout as grid items

```md
> [!grid-card]
> > [!grid-item]
> > ### Lorem ipsum dolor
> > sit amet
> > 
> > ---
> > 
> > > Sed ut perspiciatis unde omnis iste natus
> 
> > [!grid-item]
> > consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
> > ```
> > Ut enim ad minim veniam, quis nostrud exercitation
> > ```
> 
> > [!grid-item]
> > - **ullamco laboris nisi ut**
> > - ***aliquip*** ex ea *commodo* consequat.
> > - Duis aute irure [[dolor in]]
> 
> > [!grid-item]
> > > [!success]
> > > voluptate velit esse cillum dolore eu fugiat nulla pariatur.
> 
> > [!grid-item]
> > - [x] Excepteur sint occaecat cupidatat
> > 
> > ![Engelbart](https://history-computer.com/ModernComputer/Basis/images/Engelbart.jpg)
> > <small>Engelbart</small>
```

> [!grid-card]
> > [!grid-item]
> > ### Lorem ipsum dolor
> > sit amet
> > 
> > ---
> > 
> > > Sed ut perspiciatis unde omnis iste natus
> 
> > [!grid-item]
> > consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
> > ```
> > Ut enim ad minim veniam, quis nostrud exercitation
> > ```
> 
> > [!grid-item]
> > - **ullamco laboris nisi ut**
> > - ***aliquip*** ex ea *commodo* consequat.
> > - Duis aute irure [[dolor in]]
> 
> > [!grid-item]
> > > [!success]
> > > voluptate velit esse cillum dolore eu fugiat nulla pariatur.
> 
> > [!grid-item]
> > - [x] Excepteur sint occaecat cupidatat
> > 
> > ![Engelbart](https://history-computer.com/ModernComputer/Basis/images/Engelbart.jpg)
> > <small>Engelbart</small>

# With list as grid items

```md
> [!grid-card li]
> - This is a simple list
> - Each element is a grid item
> - hh
> 	- You can have a sub-list
> 	- with multiple elements inside
> - Enjoy
```

> [!grid-card li]
> - This is a simple list
> - Each element is a grid item
> - You can have a sub-list
> 	- with multiple
> 	- elements inside


You can almost reproduce the above example like so :

```md
> [!grid-card li]
> - ### Lorem ipsum dolor
> 	- sit amet
> 	- ---
> 	- > Sed ut perspiciatis unde omnis iste natus
> -
> 	- consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
> 	- `Ut enim ad minim veniam, quis nostrud exercitation`
> -
> 	- - **ullamco laboris nisi ut**
> 	- - ***aliquip*** ex ea *commodo* consequat.
> 	- - Duis aute irure [[dolor in]]
> 
> - > [!success]
>   > voluptate velit esse cillum dolore eu fugiat nulla pariatur.
> 
> - 
> 	- - [x] Excepteur sint occaecat cupidatat
> 	- 
> 	- ![Engelbart](https://history-computer.com/ModernComputer/Basis/images/Engelbart.jpg)
> 	- <small>Engelbart</small>
```

> [!grid-card li]
> - ### Lorem ipsum dolor
> 	- sit amet
> 	- ---
> 	- > Sed ut perspiciatis unde omnis iste natus
> -
> 	- consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
> 	- `Ut enim ad minim veniam, quis nostrud exercitation`
> -
> 	- - **ullamco laboris nisi ut**
> 	- - ***aliquip*** ex ea *commodo* consequat.
> 	- - Duis aute irure [[dolor in]]
> 
> - > [!success]
>   > voluptate velit esse cillum dolore eu fugiat nulla pariatur.
> 
> - 
> 	- - [x] Excepteur sint occaecat cupidatat
> 	- 
> 	- ![Engelbart](https://history-computer.com/ModernComputer/Basis/images/Engelbart.jpg)
> 	- <small>Engelbart</small>

```markdown
> [!grid-3 li card]
> - This
> - is
> - a
> 	- nested
> 		- nested 2
> 	- other
> - simple
> - grid
> - formed with
> - markdown lists
```

> [!grid-3 li card]
> - This
> - is
> - a
> 	- nested
> 		- nested 2
> 	- other
> - simple
> - grid
> - formed with
> - markdown lists

# Advanced grid options

To customize a grid, add keywords after "grid".

```md
> [!grid ADD OPTIONS HERE]
> > [!grid-item]
> > A
> 
> > [!grid-item]
> > B
```

## Cards

> "card" Is a shortcut for "padding border gap bg"

```md
> [!grid-2 card]
```

> [!grid-2 card]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2
> 
> > [!grid-item]
> > 3
> 
> > [!grid-item]
> > 4

```md
> [!grid-2 card li]
```

> [!grid-2 li card]
> - 1
> - 2
> - 3
> - 4

> `grid-card` and `grid-card-3` : Is a shortcut for `grid-3 grid-tablet-2 grid-mobile-1 padding border gap bg same-width same-height`

```md
> [!grid-card]
```

```md
> [!grid-card-3]
```

> [!grid-card-3]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2
> 
> > [!grid-item]
> > 3
> 
> > [!grid-item]
> > 4

```md
> [!grid-card-3 li]
```

> [!grid-card-3 li]
> - 1
> - 2
> - 3
> - 4

> `grid-card-2` : Is a shortcut for `grid-2 grid-tablet-1 grid-mobile-1 padding border gap bg same-width same-height`

```md
> [!grid-card-2]
```

> [!grid-card-2]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2
> 
> > [!grid-item]
> > 3
> 
> > [!grid-item]
> > 4

```md
> [!grid-card-2 li]
```

> [!grid-card-2 li]
> - 1
> - 2
> - 3
> - 4

## Number of columns

```md
> [!grid-auto card]
```

> [!grid-auto card]
> > [!grid-item]
> > This is a grid
> 
> > [!grid-item]
> > with
> 
> > [!grid-item]
> > multiple items inside
> 
> > [!grid-item]
> > of different widths and different heights
> 
> > [!grid-item]
> > Some items
> > can be
> > on
> > multiple lines
> 
> > [!grid-item]
> > 
> 
> > [!grid-item]
> > <- Or some can be empty

```md
> [!grid-auto card li]
```

> [!grid-auto card li]
> - This is a grid
> - with
> - multiple items inside
> - of different widths and different heights
> - Some items
> 	- can be
> 	- on
> 	- multiple lines
> -
> - <- Or some can be empty

```md
> [!grid-2 grid-3 grid-4 grid-5 grid-6 grid-7 grid-8 card]
```

> [!grid-2 card]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2

> [!grid-3 card]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2
> 
> > [!grid-item]
> > 3

> [!grid-4 card]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2
> 
> > [!grid-item]
> > 3
> 
> > [!grid-item]
> > 4

> [!grid-5 card]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2
> 
> > [!grid-item]
> > 3
> 
> > [!grid-item]
> > 4
> 
> > [!grid-item]
> > 5

> [!grid-6 card]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2
> 
> > [!grid-item]
> > 3
> 
> > [!grid-item]
> > 4
> 
> > [!grid-item]
> > 5
> 
> > [!grid-item]
> > 6

> [!grid-7 card]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2
> 
> > [!grid-item]
> > 3
> 
> > [!grid-item]
> > 4
> 
> > [!grid-item]
> > 5
> 
> > [!grid-item]
> > 6
> 
> > [!grid-item]
> > 7

> [!grid-8 card]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2
> 
> > [!grid-item]
> > 3
> 
> > [!grid-item]
> > 4
> 
> > [!grid-item]
> > 5
> 
> > [!grid-item]
> > 6
> 
> > [!grid-item]
> > 7
> 
> > [!grid-item]
> > 8

```md
> [!grid-2 grid-3 grid-4 grid-5 grid-6 grid-7 grid-8 card li]
```

> [!grid-2 card li]
> - 1
> - 2

> [!grid-3 card li]
> - 1
> - 2
> - 3

> [!grid-4 card li]
> - 1
> - 2
> - 3
> - 4

> [!grid-5 card li]
> - 1
> - 2
> - 3
> - 4
> - 5

> [!grid-6 card li]
> - 1
> - 2
> - 3
> - 4
> - 5
> - 6

> [!grid-7 card li]
> - 1
> - 2
> - 3
> - 4
> - 5
> - 6
> - 7

> [!grid-8 card li]
> - 1
> - 2
> - 3
> - 4
> - 5
> - 6
> - 7
> - 8

## Number of columns on tablet / mobile

```md
> [!grid-4 grid-tablet-2 grid-mobile-1 card]
```

> [!grid-4 grid-tablet-3 grid-mobile-1 card]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2
> 
> > [!grid-item]
> > 3
> 
> > [!grid-item]
> > 4

```md
> [!grid-4 grid-tablet-2 grid-mobile-1 card li]
```

> [!grid-4 grid-tablet-3 grid-mobile-1 card li]
> - 1
> - 2
> - 3
> - 4

## Borders

```md
> [!grid-4]
```

> [!grid-4]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2
> 
> > [!grid-item]
> > 3
> 
> > [!grid-item]
> > 4

```md
> [!grid-4 border]
```

> [!grid-4 border]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2
> 
> > [!grid-item]
> > 3
> 
> > [!grid-item]
> > 4

```md
> [!grid-4 border li]
```

> [!grid-4 border li]
> - 1
> - 2
> - 3
> - 4

## Gap

```md
> [!grid-4 border]
```

> [!grid-4 border]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2
> 
> > [!grid-item]
> > 3
> 
> > [!grid-item]
> > 4

```md
> [!grid-4 border gap]
```

> [!grid-4 border gap]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2
> 
> > [!grid-item]
> > 3
> 
> > [!grid-item]
> > 4

```md
> [!grid-4 border gap li]
```

> [!grid-4 border gap li]
> - 1
> - 2
> - 3
> - 4

## Padding

```md
> [!grid-4 border gap]
```

> [!grid-4 border gap]
> > [!grid-item]
> > left
> 
> > [!grid-item]
> > left
> 
> > [!grid-item]
> > left
> 
> > [!grid-item]
> > left

```md
> [!grid-4 border gap padding]
```

> [!grid-4 border gap padding]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2
> 
> > [!grid-item]
> > 3
> 
> > [!grid-item]
> > 4

```md
> [!grid-4 border gap padding li]
```

> [!grid-4 border gap padding li]
> - 1
> - 2
> - 3
> - 4

## Background

```md
> [!grid-4 border gap padding bg]
```

> [!grid-4 border gap padding bg]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2
> 
> > [!grid-item]
> > 3
> 
> > [!grid-item]
> > 4

```md
> [!grid-4 border gap padding bg li]
```

> [!grid-4 border gap padding bg li]
> - 1
> - 2
> - 3
> - 4

## Same width

```md
> [!grid-4 card]
```

> [!grid-4 card]
> > [!grid-item]
> > 111111111
> 
> > [!grid-item]
> > 2
> 
> > [!grid-item]
> > 3
> 
> > [!grid-item]
> > 4444
> 
> > [!grid-item]
> > 5
> 
> > [!grid-item]
> > 6
> 
> > [!grid-item]
> > 777777777777777

```md
> [!grid-4 card same-width]
```

> [!grid-4 card same-width]
> > [!grid-item]
> > 111111111
> 
> > [!grid-item]
> > 2
> 
> > [!grid-item]
> > 3
> 
> > [!grid-item]
> > 4444
> 
> > [!grid-item]
> > 5
> 
> > [!grid-item]
> > 6
> 
> > [!grid-item]
> > 777777777777777

```md
> [!grid-4 card same-width li]
```

> [!grid-4 card same-width li]
> - 111111111
> - 2
> - 3
> - 4444
> - 5
> - 6
> - 77777777777777

## Same height

```md
> [!grid-4 card]
```

> [!grid-4 card]
> > [!grid-item]
> > 111111111
> > 111
> > 11111
> 
> > [!grid-item]
> > 2
> 
> > [!grid-item]
> > 3
> > 3
> 
> > [!grid-item]
> > 4444
> 
> > [!grid-item]
> > 5
> 
> > [!grid-item]
> > 6
> 
> > [!grid-item]
> > 77777777777777777
> > 7
> > 7
> > 7

```md
> [!grid-4 card same-height]
```

> ⚠️ Does not work with "grid-auto"

> [!grid-4 card same-height]
> > [!grid-item]
> > 1
> > 1
> 
> > [!grid-item]
> > 2
> 
> > [!grid-item]
> > 3
> > 3
> 
> > [!grid-item]
> > 4
> 
> > [!grid-item]
> > 5
> 
> > [!grid-item]
> > 6
> 
> > [!grid-item]
> > 7
> > 7
> > 7
> > 7
> > 7

```md
> [!grid-4 card same-height li]
```

> ⚠️ Does not work with "grid-auto"

> [!grid-4 card same-height li]
> - 1
> 	- 1
> - 2
> - 3
> 	- 3
> - 4
> - 5
> - 6
> - 7
> 	- 7
> 	- 7
> 	- 7
> 	- 7

## Same height across all rows

```md
> [!grid-4 card same-height-all]
```

> ⚠️ Does not work with "grid-auto"

> [!grid-4 card same-height-all]
> > [!grid-item]
> > 1
> > 1
> 
> > [!grid-item]
> > 2
> 
> > [!grid-item]
> > 3
> > 3
> 
> > [!grid-item]
> > 4
> 
> > [!grid-item]
> > 5
> 
> > [!grid-item]
> > 6
> 
> > [!grid-item]
> > 7
> > 7
> > 7
> > 7
> > 7

```md
> [!grid-4 card same-height-all li]
```

> ⚠️ Does not work with "grid-auto"

> [!grid-4 card same-height-all li]
> - 1
> 	- 1
> - 2
> - 3
> 	- 3
> - 4
> - 5
> - 6
> - 7
> 	- 7
> 	- 7
> 	- 7
> 	- 7

## Alignment

```md
> [!grid-4 card]
```

> [!grid-4 card]
> > [!grid-item]
> > left
> 
> > [!grid-item]
> > left
> 
> > [!grid-item]
> > left
> 
> > [!grid-item]
> > left

```md
> [!grid-4 card center]
```

> [!grid-4 card center]
> > [!grid-item]
> > center
> 
> > [!grid-item]
> > center
> 
> > [!grid-item]
> > center
> 
> > [!grid-item]
> > center

```md
> [!grid-4 card center li]
```

> [!grid-4 card center li]
> - center
> - center
> - center
> - center

```md
> [!grid-4 card right]
```

> [!grid-4 card right]
> > [!grid-item]
> > right
> 
> > [!grid-item]
> > right
> 
> > [!grid-item]
> > right
> 
> > [!grid-item]
> > right

```md
> [!grid-4 card right li]
```

> [!grid-4 card right li]
> - right
> - right
> - right
> - right

```md
> [!grid-4 card same-height top]
```

> [!grid-4 card same-height top]
> > [!grid-item]
> > top
> > top
> 
> > [!grid-item]
> > top
> 
> > [!grid-item]
> > top
> 
> > [!grid-item]
> > top
> > top
> > top
> > top

```md
> [!grid-4 card same-height top li]
```

> [!grid-4 card same-height top li]
> - top
> 	- top
> - top
> - top
> -
> 	- top
> 	- top
> 	- top
> 	- top

```md
> [!grid-4 card same-height middle]
```

> [!grid-4 card same-height middle]
> > [!grid-item]
> > middle
> > middle
> 
> > [!grid-item]
> > middle
> 
> > [!grid-item]
> > middle
> 
> > [!grid-item]
> > middle
> > middle
> > middle
> > middle

```md
> [!grid-4 card same-height middle li]
```

> [!grid-4 card same-height middle li]
> - middle
> 	- middle
> - middle
> - middle
> -
> 	- middle
> 	- middle
> 	- middle
> 	- middle

```md
> [!grid-4 card same-height bottom]
```

> [!grid-4 card same-height bottom]
> > [!grid-item]
> > bottom
> > bottom
> 
> > [!grid-item]
> > bottom
> 
> > [!grid-item]
> > bottom
> 
> > [!grid-item]
> > bottom
> > bottom
> > bottom
> > bottom

```md
> [!grid-4 card same-height bottom li]
```

> [!grid-4 card same-height bottom li]
> - bottom
> 	- bottom
> - bottom
> - bottom
> - bottom
> 	- bottom
> 	- bottom
> 	- bottom

```md
> [!grid-4 card same-height center middle]
```

> [!grid-4 card same-height center middle]
> > [!grid-item]
> > center + middle
> > center + middle
> 
> > [!grid-item]
> > center + middle
> 
> > [!grid-item]
> > center + middle
> 
> > [!grid-item]
> > center + middle
> > center + middle
> > center + middle
> > center + middle

```md
> [!grid-4 card same-height center middle li]
```

> [!grid-4 card same-height center middle li]
> - center + middle
> 	- center + middle
> - center + middle
> - center + middle
> - center + middle
> 	- center + middle
> 	- center + middle
> 	- center + middle

```md
> [!grid-4 card same-height center bottom]
```

> [!grid-4 card same-height center bottom]
> > [!grid-item]
> > center + bottom
> > center + bottom
> 
> > [!grid-item]
> > center + bottom
> 
> > [!grid-item]
> > center + bottom
> 
> > [!grid-item]
> > center + bottom
> > center + bottom
> > center + bottom
> > center + bottom

```md
> [!grid-4 card same-height center bottom li]
```

> [!grid-4 card same-height center bottom li]
> - center + bottom
> 	- center + bottom
> - center + bottom
> - center + bottom
> - center + bottom
> 	- center + bottom
> 	- center + bottom
> 	- center + bottom

```md
> [!grid-4 card same-height right middle]
```

> [!grid-4 card same-height right middle]
> > [!grid-item]
> > right + middle
> > right + middle
> 
> > [!grid-item]
> > right + middle
> 
> > [!grid-item]
> > right + middle
> 
> > [!grid-item]
> > right + middle
> > right + middle
> > right + middle
> > right + middle

```md
> [!grid-4 card same-height right middle li]
```

> [!grid-4 card same-height right middle li]
> - right + middle
> 	- right + middle
> - right + middle
> - right + middle
> - right + middle
> 	- right + middle
> 	- right + middle
> 	- right + middle

## Only show on mobile / tablet / pc

```md
> [!grid-2 card pc-only]
```

> [!grid-2 grid-2 card pc-only]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2

```md
> [!grid-2 card tablet-only]
```

> [!grid-2 card tablet-only]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2

```md
> [!grid-2 card mobile-only]
```

> [!grid-2 card mobile-only]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2

## Hide on mobile / tablet / pc

```md
> [!grid-2 card hide-on-pc]
```

> [!grid-2 card hide-on-pc]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2

```md
> [!grid-2 card hide-on-tablet]
```

> [!grid-2 card hide-on-tablet]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2

```md
> [!grid-2 card hide-on-mobile]
```

> [!grid-2 card hide-on-mobile]
> > [!grid-item]
> > 1
> 
> > [!grid-item]
> > 2

# Positioning fixes

## Add margin to the bottom if next element is not a div / hr

> [!grid-card-2 li]
> - 1
> - 2

next element is text (margin added)

> [!grid-card-2 li]
> - 1
> - 2

---
^-- next element is hr (no margin added)

> [!grid-card-2 li]
> - 1
> - 2

> [!info]
> next element is div (no margin added)

## Add margin between multiple grid callouts

> [!grid-card-2 li]
> - 1
> - 2

> [!grid-card-2 li]
> - 3
> - 4

^-- should not be sticked

## By default lists and other elements in callouts have too much margin-block, avoid that

> [!grid-card-2]
> > [!grid-item]
> > 1
>
> > [!grid-item]
> > 2

^-- should be the same margin-block inside with :

> [!grid-card-2 li]
> - 1
> - 2