Grid

Prints a list if thumbnails, linked to a larger version of the thumbnail.

Grid Container

Grid Item
Grid Item
Grid Item
Grid Item

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.

<div id="61efaad10c14c" 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="61efaad10c12d">
    <div id="61efaad10bf9c" 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="61efaad10bf97">
    Grid Item
</div>
    <div id="61efaad10c032" 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="61efaad10c02f">
    Grid Item
</div>    
    <div id="61efaad10c091" 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="61efaad10c08e">
    Grid Item
</div>
    <div id="61efaad10c0e9" 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="61efaad10c0e7">
    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
@endgrid

More container options

Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item

Advanced layouts

Using the other options the component allows we can create for example an responsive auto layout:ing inline thing.

<div id="61efaad10c74d" 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="61efaad10c748">
    <div id="61efaad10c556" class="c-grid u-color__bg--primary u-rounded c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efaad10c552">
    Grid Item
</div>
    <div id="61efaad10c5ab" class="c-grid u-color__bg--secondary u-rounded c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efaad10c5a8">
    Grid Item
</div>    
    <div id="61efaad10c5f1" class="c-grid u-color__bg--info u-rounded c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efaad10c5ee">
    Grid Item
</div>
    <div id="61efaad10c64a" class="c-grid u-color__bg--success u-rounded c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efaad10c647">
    Grid Item
</div>
    <div id="61efaad10c68a" class="c-grid u-color__bg--primary u-rounded c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efaad10c688">
    Grid Item
</div>
    <div id="61efaad10c6c9" class="c-grid u-color__bg--secondary u-rounded c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efaad10c6c7">
    Grid Item
</div>    
    <div id="61efaad10c70a" class="c-grid u-color__bg--info u-rounded c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efaad10c707">
    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
@endgrid

Grid Item

Grid Item
Grid Item
Grid Item
Grid 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.

<div id="61efaad10ce8a" 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="61efaad10ce85">
    <div id="61efaad10cd0d" 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="61efaad10cd08">
    Grid Item
</div>
    <div id="61efaad10cd77" 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="61efaad10cd74">
    Grid Item
</div>    
    <div id="61efaad10cde8" 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="61efaad10cde3">
    Grid Item
</div>
    <div id="61efaad10ce43" 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="61efaad10ce40">
    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
@endgrid

Gutter

Grid Item
Grid Item
Grid Item

Building grids with components

We can insert a gutter between the grid items. The gutter allows the same options as spacing utility.

<div id="61efaad10d456" 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="61efaad10d451">
    <div id="61efaad10d341" 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="61efaad10d33d">
    Grid Item
</div>
    <div id="61efaad10d3a0" 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="61efaad10d39e">
    Grid Item
</div>
    <div id="61efaad10d40b" 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="61efaad10d408">
    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
@endgrid

Blade 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.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Grid/grid.json