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="62becd96932c5" 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="62becd96932be">
    <div id="62becd96930ae" 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="62becd96930a8">
    Grid Item
</div>
    <div id="62becd96931f8" 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="62becd96931f5">
    Grid Item
</div>    
    <div id="62becd9693241" 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="62becd969323f">
    Grid Item
</div>
    <div id="62becd9693281" 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="62becd969327e">
    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

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="62becd969376e" 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="62becd969376a">
    <div id="62becd96935b8" class="c-grid u-color__bg--primary u-rounded c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="62becd96935b4">
    Grid Item
</div>
    <div id="62becd96935f4" class="c-grid u-color__bg--secondary u-rounded c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="62becd96935f2">
    Grid Item
</div>    
    <div id="62becd9693644" class="c-grid u-color__bg--info u-rounded c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="62becd9693640">
    Grid Item
</div>
    <div id="62becd9693699" class="c-grid u-color__bg--success u-rounded c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="62becd9693694">
    Grid Item
</div>
    <div id="62becd96936dc" class="c-grid u-color__bg--primary u-rounded c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="62becd96936d9">
    Grid Item
</div>
    <div id="62becd969370e" class="c-grid u-color__bg--secondary u-rounded c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="62becd969370c">
    Grid Item
</div>    
    <div id="62becd969373d" class="c-grid u-color__bg--info u-rounded c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="62becd969373b">
    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

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="62becd9693c3b" 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="62becd9693c37">
    <div id="62becd9693b07" 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="62becd9693af7">
    Grid Item
</div>
    <div id="62becd9693b70" 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="62becd9693b6b">
    Grid Item
</div>    
    <div id="62becd9693bc6" 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="62becd9693bc4">
    Grid Item
</div>
    <div id="62becd9693c05" 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="62becd9693c03">
    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

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="62becd9694114" 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="62becd969410f">
    <div id="62becd9694034" 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="62becd9694030">
    Grid Item
</div>
    <div id="62becd969407a" 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="62becd9694078">
    Grid Item
</div>
    <div id="62becd96940c9" 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="62becd96940c6">
    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