Grid

• Responsive
• Cascadable grid
• Grid justify content modifier
• Grid align items modifier
• Grid reverse modifier
• Grid column modifier
• Grid nowrap modifier
• Grid inline modifier
• Grid gutter modifier
• Grid aspect ratio modifier
• Item grow modifier
• Item width percentages modifier
• Item max widths modifier
• Item fixed widths modifier
• Item aspect ratios modifier
• Item orders modifier

Responsive

Some of the modifiers of this component are Responsive, which means that they may be applied using classes or shorthand attribute on specified screen sizes.

<!-- Design tokens with classes -->
<element class="[MOD_PREFIX]-[MOD_NAME]-[SCR_SIZE_NAME1] [MOD_PREFIX]-[MOD_NAME]-[SCR_SIZE_NAME2]"></element>
<!-- Example with 50% width item modifier applied only on sm and md screen sizes -->
<div class="my-grid mod-w-6-sm mod-w-6-md"></div>
<!-- Example of main axis modifier applied only on sm and md screen sizes -->
<div class="my-grid mod-space-between-sm mod-space-between-md"></div>

<!-- Design tokens with attribute shorthand -->
<element [MOD_PREFIX]-[MOD_NAME]="[SCR_SIZE_NAME1],[SCR_SIZE_NAME2],etc"></element>
<!-- Example with 50% width item modifier applied only on sm and md screen sizes -->
<div class="my-grid" mod-w-6="sm,md"></div>
<!-- Example of main axis modifier applied only on sm and md screen sizes -->
<div class="my-grid" mod-space-between="sm,md"></div>

Cascadable grid

Default markup

<h3>Grid with simple <mark>div</mark></h3>
<div class="my-grid">
    <div>div flex item</div>
    <div>div flex item</div>
    <div>div flex item</div>
    <div>div flex item</div>
</div>
<h3>Grid with <mark>ul</mark> and <mark>ol</mark></h3>
<ul class="my-grid">
    <li>li flex item</li>
    <li class="my-grid">
        <div>div flex item</div>
        <div>div flex item</div>
        <div>div flex item</div>
        <div>div flex item</div>
    </li>
    <li>li flex item</li>
    <li>li flex item
        <ol class="my-grid">
            <li>li flex item</li>
            <li>li flex item</li>
        </ol>
    </li>
</ul>
<h3>Grid with simple <mark>span</mark></h3>
<span class="my-grid">
    <span>span flex item</span>
    <span>span flex item</span>
    <span>span flex item</span>
    <span>span flex item</span>
</span>

<!-- DEMO ONLY -->
<style>
.my-grid { background-color: var(--briks-color-neutral-light-3); }
.my-grid > * { background-color: var(--briks-color-neutral-light-max); border: 1px dotted var(--briks-color-neutral); }
</style>

Grid justify content modifier

Responsive grid modifiers for main flexbox axis management

<h3><mark>my-grid mod-left</mark> modifier</h3>
<div class="my-grid mod-left">
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
</div>

<h3><mark>my-grid mod-right</mark> modifier</h3>
<div class="my-grid mod-right">
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
</div>

<h3><mark>my-grid mod-center</mark> modifier</h3>
<div class="my-grid mod-center">
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
</div>

<h3><mark>my-grid mod-space-around</mark> modifier</h3>
<div class="my-grid mod-space-around">
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
</div>

<h3><mark>my-grid mod-space-between</mark> modifier</h3>
<div class="my-grid mod-space-between">
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
</div>

<h3><mark>my-grid mod-space-evenly</mark> modifier</h3>
<div class="my-grid mod-space-evenly">
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
</div>

<!-- DEMO ONLY -->
<style>
    .my-grid { background-color: var(--briks-color-neutral-light-3); }
    .my-grid > * { background-color: var(--briks-color-neutral-light-max); border: 1px dotted var(--briks-color-neutral); }
</style>

Grid align items modifier

Grid modifiers for cross flexbox axis management

<h3><mark>my-grid mod-top</mark> modifier</h3>
<div class="my-grid mod-top">
    <div>flex item</div>
    <div>flex item height 40px</div>
    <div>flex item height 60px width padding top</div>
    <div>flex item height 50px</div>
</div>

<h3><mark>my-grid mod-baseline</mark> modifier</h3>
<div class="my-grid mod-baseline">
    <div>flex item</div>
    <div>flex item height 40px</div>
    <div>flex item height 60px width padding top</div>
    <div>flex item height 50px</div>
</div>

<h3><mark>my-grid mod-middle</mark> modifier</h3>
<div class="my-grid mod-middle">
    <div>flex item</div>
    <div>flex item height 40px</div>
    <div>flex item height 60px width padding top</div>
    <div>flex item height 50px</div>
</div>

<h3><mark>my-grid mod-bottom</mark> modifier</h3>
<div class="my-grid mod-bottom">
    <div>flex item</div>
    <div>flex item height 40px</div>
    <div>flex item height 60px width padding top</div>
    <div>flex item height 50px</div>
</div>


<!-- DEMO ONLY -->
<style>
    .my-grid { background-color: var(--briks-color-neutral-light-3); }
    .my-grid > * { background-color: var(--briks-color-neutral-light-max); border: 1px dotted var(--briks-color-neutral); }
    .my-grid > *:nth-child(2) { height: 40px; }
    .my-grid > *:nth-child(3) { height: 60px; padding-top: 1em }
    .my-grid > *:nth-child(4) { height: 50px; }
</style>

Grid reverse modifier

Responsive reverse order for all grid items

<h3><mark>my-grid mod-reverse</mark> modifier</h3>
<div class="my-grid mod-reverse">
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
</div>

<!-- DEMO ONLY -->
<style>
    .my-grid { background-color: var(--briks-color-neutral-light-3); }
    .my-grid > * { background-color: var(--briks-color-neutral-light-max); border: 1px dotted var(--briks-color-neutral); }
</style>

Grid column modifier

Responsive column mode as flex-direction

<h3><mark>my-grid mod-column</mark> modifier</h3>
<div class="my-grid mod-column">
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
</div>

<!-- DEMO ONLY -->
<style>
    .my-grid { background-color: var(--briks-color-neutral-light-3); }
    .my-grid > * { background-color: var(--briks-color-neutral-light-max); border: 1px dotted var(--briks-color-neutral); }
</style>

Grid nowrap modifier

Responsive Prevents grid to wrap: No carriage return when items width exceed container width

<h3><mark>my-grid mod-nowrap</mark> modifier</h3>
<div class="my-grid mod-nowrap">
    <div>flex item with a long text: Adipisicing ad qui ullamco nisi nostrud quis culpa Ullamco minim non aliqua duis velit adipisicing nulla culpa ex sunt culpa.</div>
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
</div>

<!-- DEMO ONLY -->
<style>
    .my-grid { background-color: var(--briks-color-neutral-light-3); }
    .my-grid > * { background-color: var(--briks-color-neutral-light-max); border: 1px dotted var(--briks-color-neutral); }
</style>

Grid inline modifier

Responsive inline-flex grid

<h3><mark>my-grid mod-inline</mark> modifier</h3>
<div class="my-grid mod-inline">
    <div>grid 1 - flex item</div>
    <div>grid 1 - flex item</div>
</div>
<div class="my-grid mod-inline">
    <div>grid 2 - flex item</div>
    <div>grid 2 - flex item</div>
</div>

<!-- DEMO ONLY -->
<style>
    .my-grid { background-color: var(--briks-color-neutral-light-3); }
    .my-grid > * { background-color: var(--briks-color-neutral-light-max); border: 1px dotted var(--briks-color-neutral); }
</style>

Grid gutter modifier

Responsive gutters on item widths. Affects widths percentages, max widths, fixed width and grow.

<h3><mark>my-grid mod-gutter-large</mark> modifier</h3>
<div class="my-grid mod-gutter-large">
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
</div>

<h3><mark>my-grid mod-gutter-mini</mark> modifier</h3>
<div class="my-grid mod-gutter-mini">
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
</div>

<!-- DEMO ONLY -->
<style>
    .my-grid { background-color: var(--briks-color-neutral-light-3); }
    .my-grid > * { background-color: var(--briks-color-neutral-light-max); border: 1px dotted var(--briks-color-neutral); }
</style>

Grid aspect ratio modifier

Adds specified aspect ratio, based on widths, on all items.

<h3><mark>my-grid mod-ar-square</mark> modifier</h3>
<div class="my-grid mod-ar-square">
    <div>flex item with aspect ratio</div>
    <div>flex item with aspect ratio</div>
    <div class="mod-ar-disabled">bypassed</div>
    <div>flex item with aspect ratio</div>
</div>

<h3><mark>my-grid mod-ar-four-thirds</mark> modifier</h3>
<div class="my-grid mod-ar-four-thirds">
    <div>flex item with aspect ratio</div>
    <div>flex item with aspect ratio</div>
    <div class="mod-ar-disabled">bypassed</div>
    <div>flex item with aspect ratio</div>
</div>

<h3><mark>my-grid mod-ar-dslr</mark> modifier</h3>
<div class="my-grid mod-ar-dslr">
    <div>flex item with aspect ratio</div>
    <div>flex item with aspect ratio</div>
    <div class="mod-ar-disabled">bypassed</div>
    <div>flex item with aspect ratio</div>
</div>

<h3><mark>my-grid mod-ar-portrait</mark> modifier</h3>
<div class="my-grid mod-ar-portrait">
    <div>flex item with aspect ratio</div>
    <div>flex item with aspect ratio</div>
    <div class="mod-ar-disabled">bypassed</div>
    <div>flex item with aspect ratio</div>
</div>

<h3><mark>my-grid mod-ar-widescreen</mark> modifier</h3>
<div class="my-grid mod-ar-widescreen">
    <div>flex item with aspect ratio</div>
    <div>flex item with aspect ratio</div>
    <div class="mod-ar-disabled">bypassed</div>
    <div>flex item with aspect ratio</div>
</div>

<h3><mark>my-grid mod-ar-scope</mark> modifier</h3>
<div class="my-grid mod-ar-scope">
    <div>flex item with aspect ratio</div>
    <div>flex item with aspect ratio</div>
    <div class="mod-ar-disabled">bypassed</div>
    <div>flex item with aspect ratio</div>
</div>

<!-- DEMO ONLY -->
<style>
    .my-grid { background-color: var(--briks-color-neutral-light-3); }
    .my-grid > * { background-color: var(--briks-color-neutral-light-max); border: 1px dotted var(--briks-color-neutral); }
</style>

Item grow modifier

Responsive item grow: Make item grow according to free space around

<div class="my-grid">
    <div>flex item</div>
    <div class="mod-grow">flex item <mark>mod-grow</mark></div>
</div>

<!-- DEMO ONLY -->
<style>
    .my-grid { background-color: var(--briks-color-neutral-light-3); }
    .my-grid > * { background-color: var(--briks-color-neutral-light-max); border: 1px dotted var(--briks-color-neutral); }
</style>

Item width percentages modifier

Responsive widths percentages modifiers for items.

<div class="my-grid">
    <div class="mod-w-1">mod-w-1</div>
    <div class="mod-w-2">mod-w-2</div>
    <div class="mod-w-3">mod-w-3</div>
    <div class="mod-w-4">mod-w-4</div>
    <div class="mod-w-5">mod-w-5</div>
    <div class="mod-w-6">mod-w-6</div>
    <div class="mod-w-7">mod-w-7</div>
    <div class="mod-w-8">mod-w-8</div>
    <div class="mod-w-9">mod-w-9</div>
    <div class="mod-w-10">mod-w-10</div>
    <div class="mod-w-11">mod-w-11</div>
    <div class="mod-w-12">mod-w-12</div>
    <div class="mod-w-p20">mod-w-p20 20%</div>
    <div class="mod-w-p20">mod-w-p20 20%</div>
    <div class="mod-w-p20">mod-w-p20 20%</div>
    <div class="mod-w-p20">mod-w-p20 20%</div>
    <div class="mod-w-p20">mod-w-p20 20%</div>
</div>

<!-- DEMO ONLY -->
<style>
    .my-grid { background-color: var(--briks-color-neutral-light-3); }
    .my-grid > * { background-color: var(--briks-color-neutral-light-max); border: 1px dotted var(--briks-color-neutral); }
</style>

Item max widths modifier

Responsive max width modifiers for items.

<div class="my-grid">
    <div class="mod-mw-small">mod-mw-small</div>
    <div class="mod-mw-mini">mod-mw-mini</div>
    <div class="mod-mw-medium">mod-mw-medium</div>
</div>

<!-- DEMO ONLY -->
<style>
    .my-grid { background-color: var(--briks-color-neutral-light-3); }
    .my-grid > * { background-color: var(--briks-color-neutral-light-max); border: 1px dotted var(--briks-color-neutral); }
</style>

Item fixed widths modifier

Responsive fixed width modifiers for items.

<div class="my-grid">
    <div class="mod-fw-mini">mod-fw-mini</div>
    <div class="mod-fw-medium">mod-fw-medium</div>
    <div class="mod-fw-large">mod-fw-large</div>
</div>

<!-- DEMO ONLY -->
<style>
    .my-grid { background-color: var(--briks-color-neutral-light-3); }
    .my-grid > * { background-color: var(--briks-color-neutral-light-max); border: 1px dotted var(--briks-color-neutral); }
</style>

Item aspect ratios modifier

Assign custom aspect ratios modifiers for items. To work properly, items with aspect ratio must have:

• Item width declared with custom CSS (current example below) or item width percentages modifier, item max widths modifier or item fixed widths modifier
• Or grid align items modifier set (flexbox cross axis management)
• Or item CSS property align-self: declared to a specified value

In this example, align-items CSS property is declared just for demo purpose because aspect ratio requires item width to be set.

<div class="my-grid">
    <div class="mod-ar-square">mod-ar-square</div>
    <div class="mod-ar-four-thirds">mod-ar-four-thirds</div>
    <div class="mod-ar-dslr">mod-ar-dslr</div>
    <div class="mod-ar-portrait">mod-ar-portrait</div>
    <div class="mod-ar-widescreen">mod-ar-widescreen</div>
    <div class="mod-ar-scope">mod-ar-scope</div>
</div>
<!-- DEMO METHOD TO HIGHLIGHT THE ASPECT RATIO -->
<style>
    .my-grid { align-items: flex-start; }
</style>

<!-- DEMO ONLY -->
<style>
    .my-grid { background-color: var(--briks-color-neutral-light-3); }
    .my-grid > * { background-color: var(--briks-color-neutral-light-max); border: 1px dotted var(--briks-color-neutral); }
</style>

Item orders modifier

Responsive flexbox order, modifiers that apply an order value on an item.

<div class="my-grid">
    <div>flex item without order</div>
    <div class="mod-order--1">mod-order--1</div>
</div>

<div class="my-grid">
    <div class="mod-order-2">mod-order-2</div>
    <div class="mod-order-1">mod-order-1</div>
    <div>flex item without order</div>
</div>
<!-- ONLY TO HIGHLIGHT THE ORDER -->
<style>
    .my-grid > *:first-child { background: lightgreen; }
</style>

<!-- DEMO ONLY -->
<style>
    .my-grid { background-color: var(--briks-color-neutral-light-3); }
    .my-grid > * { background-color: var(--briks-color-neutral-light-max); border: 1px dotted var(--briks-color-neutral); }
</style>