Grid
Prints a list if thumbnails, linked to a larger version of the thumbnail.
Grid Container
Building grids with components
The grid component allows you to build CSS grids with components. It has 12 columns and an infinite amount of rows.
Grid Item
Grid Item
Grid Item
Grid Item
<div id="" class="c-grid c-grid__container c-grid__container__gap__col--0 c-grid__container__gap__row--0" style="grid-template-columns: repeat(12, minmax(auto, 1fr));" data-uid="647e3c2b67521">
<div id="" class="c-grid u-color__bg--primary u-rounded c-grid__column__start--1@xs c-grid__column__end--13@xs c-grid__column__start--1@sm c-grid__column__end--13@sm c-grid__column__start--1@md c-grid__column__end--13@md c-grid__column__start--3@lg c-grid__column__end--9@lg c-grid__column__start--3@xl c-grid__column__end--9@xl c-grid__row__start--1@xs c-grid__row__end--2@xs c-grid__row__start--1@sm c-grid__row__end--2@sm c-grid__row__start--1@md c-grid__row__end--2@md c-grid__row__start--1@lg c-grid__row__end--2@lg c-grid__row__start--1@xl c-grid__row__end--2@xl c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="647e3c2b671c4">
Grid Item
</div>
<div id="" class="c-grid u-color__bg--secondary u-rounded c-grid__column__start--1@xs c-grid__column__end--6@xs c-grid__column__start--1@sm c-grid__column__end--6@sm c-grid__column__start--1@md c-grid__column__end--6@md c-grid__column__start--1@lg c-grid__column__end--6@lg c-grid__column__start--1@xl c-grid__column__end--6@xl c-grid__row__start--2@xs c-grid__row__end--4@xs c-grid__row__start--2@sm c-grid__row__end--4@sm c-grid__row__start--2@md c-grid__row__end--4@md c-grid__row__start--2@lg c-grid__row__end--4@lg c-grid__row__start--2@xl c-grid__row__end--4@xl c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="647e3c2b6743b">
Grid Item
</div>
<div id="" class="c-grid u-color__bg--info u-rounded c-grid__column__start--6@xs c-grid__column__end--13@xs c-grid__column__start--6@sm c-grid__column__end--13@sm c-grid__column__start--6@md c-grid__column__end--13@md c-grid__column__start--6@lg c-grid__column__end--13@lg c-grid__column__start--6@xl c-grid__column__end--13@xl c-grid__row__start--2@xs c-grid__row__end--6@xs c-grid__row__start--2@sm c-grid__row__end--6@sm c-grid__row__start--2@md c-grid__row__end--6@md c-grid__row__start--2@lg c-grid__row__end--6@lg c-grid__row__start--2@xl c-grid__row__end--6@xl c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="647e3c2b67492">
Grid Item
</div>
<div id="" class="c-grid u-color__bg--success u-rounded c-grid__column__start--1@xs c-grid__column__end--6@xs c-grid__column__start--1@sm c-grid__column__end--6@sm c-grid__column__start--1@md c-grid__column__end--6@md c-grid__column__start--1@lg c-grid__column__end--6@lg c-grid__column__start--1@xl c-grid__column__end--6@xl c-grid__row__start--5@xs c-grid__row__end--6@xs c-grid__row__start--5@sm c-grid__row__end--6@sm c-grid__row__start--5@md c-grid__row__end--6@md c-grid__row__start--5@lg c-grid__row__end--6@lg c-grid__row__start--5@xl c-grid__row__end--6@xl c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="647e3c2b674e6">
Grid Item
</div>
</div>@grid(["container" => true])
@grid([
"col" => [
"xs" => [1,13],
"sm" => [1,13],
"md" => [1,13],
"lg" => [3,9],
"xl" => [3,9]
],
"row" => [
"xs" => [1,2],
"sm" => [1,2],
"md" => [1,2],
"lg" => [1,2],
"xl" => [1,2]
],
"classList" => [
"u-color__bg--primary",
"u-rounded"
]
])
Grid Item
@endgrid
@grid([
"col" => [
"xs" => [1,6],
"sm" => [1,6],
"md" => [1,6],
"lg" => [1,6],
"xl" => [1,6]
],
"row" => [
"xs" => [2,4],
"sm" => [2,4],
"md" => [2,4],
"lg" => [2,4],
"xl" => [2,4]
],
"classList" => [
"u-color__bg--secondary",
"u-rounded"
]
])
Grid Item
@endgrid
@grid([
"col" => [
"xs" => [6,13],
"sm" => [6,13],
"md" => [6,13],
"lg" => [6,13],
"xl" => [6,13]
],
"row" => [
"xs" => [2,6],
"sm" => [2,6],
"md" => [2,6],
"lg" => [2,6],
"xl" => [2,6]
],
"classList" => [
"u-color__bg--info",
"u-rounded"
]
])
Grid Item
@endgrid
@grid([
"col" => [
"xs" => [1,6],
"sm" => [1,6],
"md" => [1,6],
"lg" => [1,6],
"xl" => [1,6]
],
"row" => [
"xs" => [5,6],
"sm" => [5,6],
"md" => [5,6],
"lg" => [5,6],
"xl" => [5,6]
],
"classList" => [
"u-color__bg--success",
"u-rounded"
]
])
Grid Item
@endgrid
@endgridMore container options
Advanced layouts
Using the other options the component allows we can create for example an responsive auto layout:ing inline thing.
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
<div id="" class="c-grid c-grid__container c-grid__container__gap__col--0 c-grid__container__gap__row--0" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));" data-uid="647e3c2b678e2">
<div id="" class="c-grid u-color__bg--primary u-rounded c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="647e3c2b676b2">
Grid Item
</div>
<div id="" class="c-grid u-color__bg--secondary u-rounded c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="647e3c2b676ed">
Grid Item
</div>
<div id="" class="c-grid u-color__bg--info u-rounded c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="647e3c2b67722">
Grid Item
</div>
<div id="" class="c-grid u-color__bg--success u-rounded c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="647e3c2b67757">
Grid Item
</div>
<div id="" class="c-grid u-color__bg--primary u-rounded c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="647e3c2b67789">
Grid Item
</div>
<div id="" class="c-grid u-color__bg--secondary u-rounded c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="647e3c2b67877">
Grid Item
</div>
<div id="" class="c-grid u-color__bg--info u-rounded c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="647e3c2b678ae">
Grid Item
</div>
</div>@grid([
"container" => true,
"columns" => "auto-fit",
"min_width" => "300px",
])
@grid([
"classList" => [
"u-color__bg--primary",
"u-rounded"
]
])
Grid Item
@endgrid
@grid([
"classList" => [
"u-color__bg--secondary",
"u-rounded"
]
])
Grid Item
@endgrid
@grid([
"classList" => [
"u-color__bg--info",
"u-rounded"
]
])
Grid Item
@endgrid
@grid([
"classList" => [
"u-color__bg--success",
"u-rounded"
]
])
Grid Item
@endgrid
@grid([
"classList" => [
"u-color__bg--primary",
"u-rounded"
]
])
Grid Item
@endgrid
@grid([
"classList" => [
"u-color__bg--secondary",
"u-rounded"
]
])
Grid Item
@endgrid
@grid([
"classList" => [
"u-color__bg--info",
"u-rounded"
]
])
Grid Item
@endgrid
@endgridGrid Item
Building grids with components
The grid item is a container inside the grid. With the grid item we can choose at which lines the item should stretch. For example if we have 3 columns and what it to stretch all of them we write 1 as starting line and 4 as the end line.
Grid Item
Grid Item
Grid Item
Grid Item
<div id="" class="c-grid c-grid__container c-grid__container__gap__col--0 c-grid__container__gap__row--0" style="grid-template-columns: repeat(12, minmax(auto, 1fr));" data-uid="647e3c2b67bb9">
<div id="" class="c-grid u-color__bg--primary u-rounded c-grid__column__start--1@xs c-grid__column__end--13@xs c-grid__column__start--1@sm c-grid__column__end--13@sm c-grid__column__start--1@md c-grid__column__end--13@md c-grid__column__start--3@lg c-grid__column__end--9@lg c-grid__column__start--3@xl c-grid__column__end--9@xl c-grid__row__start--1@xs c-grid__row__end--1@xs c-grid__row__start--1@sm c-grid__row__end--1@sm c-grid__row__start--1@md c-grid__row__end--1@md c-grid__row__start--1@lg c-grid__row__end--1@lg c-grid__row__start--1@xl c-grid__row__end--1@xl c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="647e3c2b67a74">
Grid Item
</div>
<div id="" class="c-grid u-color__bg--secondary u-rounded c-grid__column__start--1@xs c-grid__column__end--6@xs c-grid__column__start--1@sm c-grid__column__end--6@sm c-grid__column__start--1@md c-grid__column__end--6@md c-grid__column__start--1@lg c-grid__column__end--6@lg c-grid__column__start--1@xl c-grid__column__end--6@xl c-grid__row__start--2@xs c-grid__row__end--4@xs c-grid__row__start--2@sm c-grid__row__end--4@sm c-grid__row__start--2@md c-grid__row__end--4@md c-grid__row__start--2@lg c-grid__row__end--4@lg c-grid__row__start--2@xl c-grid__row__end--4@xl c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="647e3c2b67ad9">
Grid Item
</div>
<div id="" class="c-grid u-color__bg--info u-rounded c-grid__column__start--6@xs c-grid__column__end--13@xs c-grid__column__start--6@sm c-grid__column__end--13@sm c-grid__column__start--6@md c-grid__column__end--13@md c-grid__column__start--6@lg c-grid__column__end--13@lg c-grid__column__start--6@xl c-grid__column__end--13@xl c-grid__row__start--2@xs c-grid__row__end--6@xs c-grid__row__start--2@sm c-grid__row__end--6@sm c-grid__row__start--2@md c-grid__row__end--6@md c-grid__row__start--2@lg c-grid__row__end--6@lg c-grid__row__start--2@xl c-grid__row__end--6@xl c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="647e3c2b67b29">
Grid Item
</div>
<div id="" class="c-grid u-color__bg--success u-rounded c-grid__column__start--1@xs c-grid__column__end--6@xs c-grid__column__start--1@sm c-grid__column__end--6@sm c-grid__column__start--1@md c-grid__column__end--6@md c-grid__column__start--1@lg c-grid__column__end--6@lg c-grid__column__start--1@xl c-grid__column__end--6@xl c-grid__row__start--5@xs c-grid__row__end--6@xs c-grid__row__start--5@sm c-grid__row__end--6@sm c-grid__row__start--5@md c-grid__row__end--6@md c-grid__row__start--5@lg c-grid__row__end--6@lg c-grid__row__start--5@xl c-grid__row__end--6@xl c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="647e3c2b67b78">
Grid Item
</div>
</div>@grid(["container" => true])
@grid([
"col" => [
"xs" => [1,13],
"sm" => [1,13],
"md" => [1,13],
"lg" => [3,9],
"xl" => [3,9]
],
"row" => [
"xs" => [1,1],
"sm" => [1,1],
"md" => [1,1],
"lg" => [1,1],
"xl" => [1,1]
],
"classList" => [
"u-color__bg--primary",
"u-rounded"
]
])
Grid Item
@endgrid
@grid([
"col" => [
"xs" => [1,6],
"sm" => [1,6],
"md" => [1,6],
"lg" => [1,6],
"xl" => [1,6]
],
"row" => [
"xs" => [2,4],
"sm" => [2,4],
"md" => [2,4],
"lg" => [2,4],
"xl" => [2,4]
],
"classList" => [
"u-color__bg--secondary",
"u-rounded"
]
])
Grid Item
@endgrid
@grid([
"col" => [
"xs" => [6,13],
"sm" => [6,13],
"md" => [6,13],
"lg" => [6,13],
"xl" => [6,13]
],
"row" => [
"xs" => [2,6],
"sm" => [2,6],
"md" => [2,6],
"lg" => [2,6],
"xl" => [2,6]
],
"classList" => [
"u-color__bg--info",
"u-rounded"
]
])
Grid Item
@endgrid
@grid([
"col" => [
"xs" => [1,6],
"sm" => [1,6],
"md" => [1,6],
"lg" => [1,6],
"xl" => [1,6]
],
"row" => [
"xs" => [5,6],
"sm" => [5,6],
"md" => [5,6],
"lg" => [5,6],
"xl" => [5,6]
],
"classList" => [
"u-color__bg--success",
"u-rounded"
]
])
Grid Item
@endgrid
@endgridGutter
Building grids with components
We can insert a gutter between the grid items. The gutter allows the same options as spacing utility.
Grid Item
Grid Item
Grid Item
<div id="" class="c-grid c-grid__container c-grid__container__gap__col--8 c-grid__container__gap__row--3" style="grid-template-columns: repeat(12, minmax(auto, 1fr));" data-uid="647e3c2b67eff">
<div id="" class="c-grid u-color__bg--primary u-rounded c-grid__column__start--1@xs c-grid__column__end--7@xs c-grid__column__start--1@sm c-grid__column__end--7@sm c-grid__column__start--1@md c-grid__column__end--7@md c-grid__column__start--1@lg c-grid__column__end--7@lg c-grid__column__start--1@xl c-grid__column__end--7@xl c-grid__row__start--1@xs c-grid__row__end--2@xs c-grid__row__start--1@sm c-grid__row__end--2@sm c-grid__row__start--1@md c-grid__row__end--2@md c-grid__row__start--1@lg c-grid__row__end--2@lg c-grid__row__start--1@xl c-grid__row__end--2@xl c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="647e3c2b67e22">
Grid Item
</div>
<div id="" class="c-grid u-color__bg--secondary u-rounded c-grid__column__start--7@xs c-grid__column__end--13@xs c-grid__column__start--7@sm c-grid__column__end--13@sm c-grid__column__start--7@md c-grid__column__end--13@md c-grid__column__start--7@lg c-grid__column__end--13@lg c-grid__column__start--7@xl c-grid__column__end--13@xl c-grid__row__start--1@xs c-grid__row__end--2@xs c-grid__row__start--1@sm c-grid__row__end--2@sm c-grid__row__start--1@md c-grid__row__end--2@md c-grid__row__start--1@lg c-grid__row__end--2@lg c-grid__row__start--1@xl c-grid__row__end--2@xl c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="647e3c2b67e7b">
Grid Item
</div>
<div id="" class="c-grid u-color__bg--info u-rounded c-grid__column__start--1@xs c-grid__column__end--13@xs c-grid__column__start--1@sm c-grid__column__end--13@sm c-grid__column__start--1@md c-grid__column__end--13@md c-grid__column__start--1@lg c-grid__column__end--13@lg c-grid__column__start--1@xl c-grid__column__end--13@xl c-grid__row__start--2@xs c-grid__row__end--4@xs c-grid__row__start--2@sm c-grid__row__end--4@sm c-grid__row__start--2@md c-grid__row__end--4@md c-grid__row__start--2@lg c-grid__row__end--4@lg c-grid__row__start--2@xl c-grid__row__end--4@xl c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="647e3c2b67ec6">
Grid Item
</div>
</div>@grid([
"container" => true,
"col_gap" => 8,
"row_gap" => 3
])
@grid([
"col" => [
"xs" => [1,7],
"sm" => [1,7],
"md" => [1,7],
"lg" => [1,7],
"xl" => [1,7]
],
"row" => [
"xs" => [1,2],
"sm" => [1,2],
"md" => [1,2],
"lg" => [1,2],
"xl" => [1,2]
],
"classList" => [
"u-color__bg--primary",
"u-rounded"
]
])
Grid Item
@endgrid
@grid([
"col" => [
"xs" => [7,13],
"sm" => [7,13],
"md" => [7,13],
"lg" => [7,13],
"xl" => [7,13]
],
"row" => [
"xs" => [1,2],
"sm" => [1,2],
"md" => [1,2],
"lg" => [1,2],
"xl" => [1,2]
],
"classList" => [
"u-color__bg--secondary",
"u-rounded"
]
])
Grid Item
@endgrid
@grid([
"col" => [
"xs" => [1,13],
"sm" => [1,13],
"md" => [1,13],
"lg" => [1,13],
"xl" => [1,13]
],
"row" => [
"xs" => [2,4],
"sm" => [2,4],
"md" => [2,4],
"lg" => [2,4],
"xl" => [2,4]
],
"classList" => [
"u-color__bg--info",
"u-rounded"
]
])
Grid Item
@endgrid
@endgridBlade component parameters
| Key | Default value | Type | Available values | Description |
| element | div | string | - | - |
| container | false | boolean | - | - |
| columns | 12 | integer | - | - |
| min_width | auto | string | - | - |
| max_width | 1fr | string | - | - |
| col_gap | 0 | integer | - | - |
| row_gap | 0 | integer | - | - |
| id | string | - | The DOM id of the component. | |
| classList | [] | array | - | Array containing wrapping classes array |
| attributeList | [] | array | - | Array containing keys and values rendered as attributes |
| containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |