components/ui/_grid.scss

A simple and cascadable grid that is based on CSS Flexbox that supports multiple HTML tags.

In all the following examples on this page:

• Flexbox items have red border
• Fexbox containers have double solid light gray border

HTML
<div class="my-grid">
    <h2>Legend:
    </h2>
    <p>Items have red border</p>
    <p>Containers have double solid light gray border</p>
</div>
<ul class="my-grid">
    <li>I am a <mark>li into an ul</mark></li>
    <li>Items have red border</li>
    <li>Containers have double solid light gray border</li>
</ul>
<p class="my-grid">
    <span>I am a <mark>span into a p</mark></span>
    <span>Items have red border</span>
    <span>Containers have double solid light gray border</span>
</p>
<a class="my-grid">
    <span>I am a <mark>span into an a</mark></span>
    <span>Items have red border</span>
    <span>Containers have double solid light gray border</span>
</a>
<section class="my-grid">
    <article>I am a <mark>article into a section</mark></article>
    <article>Items have red border</article>
    <article>Containers have double solid light gray border</article>
</section>

Multiple grids

HTML
<div class="my-grid">
    <div>Hello!</div>
    <div>Items have green border</div>
    <div>Flexbox grids have dotted gray border</div>
</div>
<div class="my-grid">
    <div>Another my-grid</div>
    <div>Another flexbox</div>
</div>

Cascading

You can include as mush as grids as you wish into a single item.

HTML
<div class="my-grid">
    <div>Hello!
    </div>
    <div>Items have green border</div>
    <div>
        Below another my-grid:
        <div class="my-grid">
            <div>Cascading
            </div>
            <div>is</div>
            <div>
                easy:
                <div class="my-grid">
                    <div>Another cascading
                    </div>
                    <div>example</div>
                </div>
            </div>
        </div>
    </div>
</div>

Auto grow

Modifier class name for items .mod-grow allows to fill the blank space.

HTML
<div class="my-grid">
    <div class="mod-grow">This is an example</div>
    <div>of</div>
    <div>mod-grow</div>
</div>
<div class="my-grid">
    <div>This is an example</div>
    <div>of</div>
    <div class="mod-grow">mod-grow</div>
</div>
<div class="my-grid">
    <div>This is an example</div>
    <div class="mod-grow">of</div>
    <div>mod-grow</div>
</div>

Responsive wrapping

By default grid items automatically wrap when there is no enough space. For each screen size or globally, it is possible to force items to stay into their axis with .mod-nowrap[-screenSizeName] modifier.

HTML
<div class="my-grid">
    <div>Grid without mod-nowrap</div>
    <div>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="my-grid mod-nowrap">
    <div>Row with mod-nowrap</div>
    <div>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="my-grid mod-nowrap-sm">
    <div>No wrap only on sm screen size</div>
    <div>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

Inline

By default flexbox container behaves like a block, spreading over all the available width. It is possible to switch to an inline mode by using modifier .mod-inline

Example of a grid with mod-nowrap:

HTML
<div class="my-grid">
    <div>Default grid</div>
    <div>Container uses all available width.</div>
    <div>Item</div>
</div>
<div class="my-grid mod-inline">
    <div>Inline grid</div>
    <div>Container width based on content.</div>
    <div>Item</div>
</div>

Horizontal alignment

• .mod-left Items are pushed towards the start of the container’s main axis.
• .mod-center Items are centered along the container’s main axis.
• .mod-right Items are pushed towards the end of the container’s main axis.
• .mod-space-between The remaining space is distributed between the items.
• .mod-space-evenly Distribute items evenly. Items have equal space around them.
• .mod-space-around Items are evenly distributed with equal space around them.

HTML
<div class="my-grid"><!-- Same as class="my-grid mod-start" as it is default -->
    <div>Default container and its</div>
    <div>flex</div>
    <div>items</div>
</div>
<div class="my-grid mod-center">
    <div>mod-center container and its</div>
    <div>flex</div>
    <div>items</div>
</div>
<div class="my-grid mod-right">
    <div>mode-right container and its</div>
    <div>flex</div>
    <div>items</div>
</div>
<div class="my-grid mod-space-between">
    <div>mod-space-between container and its</div>
    <div>flex</div>
    <div>items</div>
</div>
<div class="my-grid mod-space-evenly">
    <div>mod-space-evenly container and its</div>
    <div>flex</div>
    <div>items</div>
</div>
<div class="my-grid mod-space-around">
    <div>mod-space-around container and its</div>
    <div>flex</div>
    <div>items</div>
</div>

CSS
/* DEMO ONLY */
.my-grid+.my-grid { margin-top: 2em;}

Vertical alignment

• .mod-top Items are aligned at the start of the cross axis.
• .mod-middle Items are centered vertically along the container’s cross axis.
• .mod-bottom Items are aligned at the end of the cross axis.
• .mod-baseline Items are aligned at the baseline of the cross axis.

HTML
<div class="my-grid">
    <div>1. Flex item</div>
    <div style="width:10ch">Flex items height is equal to the tallest item.</div>
    <div>Flex item</div>
</div>
<div class="my-grid mod-top">
    <div>2. Flex item</div>
    <div style="width:10ch">Flex item vertically aligned on top.</div>
    <div>Flex item</div>
</div>
<div class="my-grid mod-middle">
    <div>3. Flex item</div>
    <div style="width:10ch">Flex item vertically aligned on middle.</div>
    <div>Flex item</div>
</div>
<div class="my-grid mod-bottom">
    <div>4. Flex item</div>
    <div style="width:10ch">Flex item vertically aligned on bottom.</div>
    <div>Flex item</div>
</div>
<section class="my-grid mod-baseline">
    <h1>5. h1 flex item</h1>
    <article>
        <h3>Vertically align items on first line</h3>
        <p>This example uses HTML5 tags.</p>
    </article>
    <aside>Flex item</aside>
</section>

Alignments combinations

Here follows examples of combinations between main and cross axis alignment.

HTML
<div class="my-grid mod-center mod-middle">
    <div>1. mod-center mod-middle</div>
    <div>center</div>
    <div>both axis</div>
</div>
<div class="my-grid mod-middle">
    <div>2. mod-middle</div>
    <div>Horizontally left</div>
    <div>Vertically centered</div>
</div>
<div class="my-grid mod-right mod-middle">
    <div>3. mod-right mod-middle</div>
    <div>Horizontally right</div>
    <div>Vertically centered</div>
</div>
<div class="my-grid mod-bottom">
    <div>4. mod-bottom</div>
    <div>Horizontally left</div>
    <div>Vertically bottom</div>
</div>
<div class="my-grid mod-right mod-bottom">
    <div>5. mod-right mod-bottom</div>
    <div>Horizontally right</div>
    <div>Vertically bottom</div>
</div>
<div class="my-grid mod-right mod-top">
    <div>6. mod-right mod-top</div>
    <div>Horizontally right</div>
    <div>Vertically top</div>
</div>

CSS
.my-grid { height: 50vh; //for demo only }

Column

By default, flex flow is set to rows. It can be set to columns with the modifier .mod-column

HTML
<div class="my-grid">
    <div>1. A standard grid</div>
    <div>flow</div>
    <div>is horizontal</div>
</div>
<div class="my-grid mod-column">
    <div>2. mod-column</div>
    <div>flow</div>
    <div>modified by column</div>
</div>
<div class="my-grid mod-column mod-top">
    <div>3. mod-column mod-top</div>
    <div>flow</div>
    <div>modified by column + aligned on left</div>
</div>
<div class="my-grid mod-column mod-center">
    <div>4. mod-column mod-center</div>
    <div>flow</div>
    <div>modified by column + aligned center</div>
</div>
<div class="my-grid mod-column mod-right">
    <div>5. mod-column mod-right</div>
    <div>flow</div>
    <div>modified by column + aligned on right</div>
</div>
<div class="my-grid mod-column mod-center mod-middle" data-demo-only="">
    <div>6. mod-column mod-center mod-middle</div>
    <div>flow</div>
    <div>modified by column + aligned middle center</div>
</div>
<div class="my-grid mod-column mod-right mod-bottom" data-demo-only="">
    <div>7. mod-column mod-right mod-bottom</div>
    <div>flow</div>
    <div>modified by column + aligned bottom right</div>
</div>

CSS
[data-demo-only] {height:50vh;}

Responsive reverse

Rows and columns flows can be reversed responsively with modifier .mod-reverse[-screenName]

HTML
<div class="my-grid mod-reverse">
    <div>A grid</div>
    <div>flow</div>
    <div>reversed</div>
</div>
<div class="my-grid mod-reverse-sm">
    <div>A grid</div>
    <div>flow</div>
    <div>reversed only on sm screen size</div>
</div>
<div class="my-grid mod-column mod-reverse">
    <div>A grid</div>
    <div>flow</div>
    <div>reversed</div>
</div>
<div class="my-grid mod-column mod-reverse-sm">
    <div>A grid</div>
    <div>flow</div>
    <div>reversed only on sm screen size</div>
</div>

Responsive order

It is possible to set a specific flex item at first place globally or on specified screen size with the responsive modifier .mod-order--1[-screenName]

Sets order:-1 to the specified grid item.

HTML
<div class="my-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div class="mod-order--1">4. Last but always first</div>
</div>
<div class="my-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div class="mod-order--1-sm">4. Last but always first on sm screen size</div>
</div>

Relative width

Modifier class name format .mod-w-[number]

Sets the relative width of items in percentage with 1/12 steps.

• .mod-w-12 Sets the width of the item to 100% (12/12).
• .mod-w-11 Sets the width of the item to 91.6666% (11/12).
• .mod-w-10 Sets the width of the item to 83.3333% (5/6).
• .mod-w-9 Sets the width of the item to 75% (3/4).
• .mod-w-8 Sets the width of the item to 66.6666% (2/3).
• .mod-w-7 Sets the width of the item to 58.3333% (7/12).
• .mod-w-6 Sets the width of the item to 50% (1/2).
• .mod-w-5 Sets the width of the item to 41.6666% (5/12).
• .mod-w-4 Sets the width of the item to 33.3333% (1/3).
• .mod-w-3 Sets the width of the item to 25% (1/4).
• .mod-w-2 Sets the width of the item to 16.6666% (1/6).
• .mod-w-1 Sets the width of the item to 8.3333% (1/12).
• .mod-w-0 Sets the width of the item to 0% (0/12).

HTML
<div class="my-grid">
    <div class="mod-w-12">mod-w-12</div>
    <div class="mod-w-11">mod-w-11</div>
    <div class="mod-w-1">mod-w-1</div>
    <div class="mod-w-10">mod-w-10</div>
    <div class="mod-w-2">mod-w-2</div>
    <div class="mod-w-9">mod-w-9</div>
    <div class="mod-w-3">mod-w-3</div>
    <div class="mod-w-8">mod-w-8</div>
    <div class="mod-w-4">mod-w-4</div>
    <div class="mod-w-7">mod-w-7</div>
    <div class="mod-w-5">mod-w-5</div>
    <div class="mod-w-6">mod-w-6</div>
    <div class="mod-w-6">mod-w-6</div>
</div>
<div class="my-grid">
    <div class="mod-w-6">mod-w-6</div>
    <div>No width specified</div>
</div>
<div class="my-grid">
    <div>No width specified</div>
    <div class="mod-w-6">mod-w-6</div>
</div>

Responsive width

Same usage as global width but modifiers contain screen size name .mod-w-[number]-[screenSizeName]. Thus, the more amount of screen sizes you have, the more you get responsive width modifiers.

Current screen sizes settings are:

SCSS
$ds-screen-sizes: (
    sm: 768,
    md: 1024,
    lg: 1440,
    xl: infinite
);

Here are some of the responsive classes you get:

Responsive playgroud

HTML
<h1>Current screen size name is
    <strong class="u-visible-sm">sm</strong>
    <strong class="u-visible-md">md</strong>
    <strong class="u-visible-lg">lg</strong>
    <strong class="u-visible-xl">xl</strong>
</h1>
<div class="my-grid">
    <div class="mod-w-8 mod-w-3-lg mod-w-6-md mod-w-8-sm">mod-w-8 mod-w-3-lg mod-w-6-md mod-w-12-sm</div>
    <div class="mod-w-4 mod-w-9-lg mod-w-6-md mod-w-4-sm">mod-w-4 mod-w-9-lg mod-w-6-md mod-w-12-sm</div>
</div>

Responsive fixed width

Modifier class name format .mod-fw-[fixedWidthName].

Assign fixed width according to grid settings $grid-items-fixed-widths. Fixed widths override relative widths.

HTML
<p>Always fixed widths:</p>
<div class="my-grid">
    <div class="mod-fw-mini">mod-fw-mini</div>
    <div class="mod-fw-medium">mod-fw-medium</div>
</div>
<p>Fixed widths on specific screen size:</p>
<div class="my-grid">
    <div class="mod-fw-mini-sm">mod-fw-mini-sm</div>
    <div class="mod-fw-medium-sm">mod-fw-medium-sm</div>
</div>
<p>Relative width + responsive fixed widths:</p>
<div class="my-grid">
    <div class="mod-w-6 mod-fw-mini-sm">Always 50% width but "mini" fixed width on "sm" screen sizes</div>
    <div class="mod-w-12 mod-fw-medium-sm">Always 100% width but "medium" fixed width on "sm" screen sizes</div>
</div>

Max widths

Grid allows custom max width for items through the modifier .mod-mw-[maxWidthName].

HTML
<div class="my-grid">
    <div class="mod-w-6">50% width</div>
    <div class="mod-w-6 mod-mw-mini">50% width but max width 200px</div>
    <div class="mod-w-12">100% width</div>
    <div class="mod-w-12 mod-mw-medium">100% width but max width 300px</div>
</div>

Gutter

Gutter modifer .mod-gutter simply applies a spacing around the items based on SASS variable $grid-gutter

HTML
<div class="my-grid mod-gutter">
    <div class="mod-w-12">A gutter row</div>
    <div class="mod-w-9">mod-w-9</div>
    <div class="mod-w-3">mod-w-3</div>
    <div class="mod-w-8">mod-w-8</div>
    <div class="mod-w-4">mod-w-4</div>
    <div class="mod-w-7">mod-w-7</div>
    <div class="mod-w-5">mod-w-5</div>
    <div class="mod-w-6">mod-w-6</div>
    <div class="mod-w-6">mod-w-6</div>
</div>
<div class="my-grid">
    <div class="mod-w-12">A non gutter row</div>
    <div class="mod-w-9">mod-w-9</div>
    <div class="mod-w-3">mod-w-3</div>
    <div class="mod-w-8">mod-w-8</div>
    <div class="mod-w-4">mod-w-4</div>
    <div class="mod-w-7">mod-w-7</div>
    <div class="mod-w-5">mod-w-5</div>
    <div class="mod-w-6">mod-w-6</div>
    <div class="mod-w-6">mod-w-6
        <div class="my-grid mod-gutter">
            <div class="mod-w-12">Cascading gutter row into a non gutter row</div>
            <div class="mod-w-9">mod-w-9</div>
            <div class="mod-w-3">mod-w-3</div>
            <div class="mod-w-8">mod-w-8</div>
            <div class="mod-w-4">mod-w-4</div>
            <div class="mod-w-7">mod-w-7</div>
            <div class="mod-w-5">mod-w-5</div>
            <div class="mod-w-6">mod-w-6</div>
            <div class="mod-w-6">mod-w-6</div>
        </div>
    </div>
</div>

Responsive gutter

$grid-gutter-default is the default margin for gutter.

It is possible to override the default gutter for each screen size:

SCSS
$grid-gutter-responsive: (
    sm: 5px //5px gutter for *sm* screen size.
);

Responsive gutter shadow

$grid-gutter-box-shadow-default is the default shadow applied on every item.

It is possible to override the default gutter shadow for each screen size:

SCSS
$grid-gutter-box-shadow-responsive: (
    sm: my-shadow(1-soft) // Shadow called "1-soft" for "sm" screen size
);

No gutter shadow

It is possible to disable shadow on gutter items with modifier .mod-noshadow on flex parent. It is also possible to add shadow on specific gutter items even if noshadow modifier is set on its parent:

HTML
<div class="my-grid mod-gutter">
    <div>A</div>
    <div>simple</div>
    <div>gutter</div>
    <div class="mod-noshadow">grid</div>
</div>
<div class="my-grid mod-gutter mod-noshadow">
    <div>A</div>
    <div>simple</div>
    <div class="mod-shadow">gutter</div>
    <div>grid</div>
</div>

Aspect ratio

It is possible to force items into a custom aspect ratio with the modifier .mod-ar-[aspectRatioName]

On container

HTML
<div class="my-grid mod-ar-square">
    <div class="mod-w-2">16% width with aspect ratio square</div>
    <div class="mod-w-4">33% width with aspect ratio square</div>
    <div class="mod-w-6 mod-ar-disabled">50% width with aspect ratio disabled</div>
</div>
<div class="my-grid mod-ar-widescreen">
    <div class="mod-w-2">16% width with aspect ratio widescreen</div>
    <div class="mod-w-4">33% width with aspect ratio widescreen</div>
    <div class="mod-w-6 mod-ar-disabled">50% width with aspect ratio disabled</div>
</div>
<div class="my-grid mod-ar-scope">
    <div class="mod-w-2">16% width with aspect ratio scope</div>
    <div class="mod-w-4">33% width with aspect ratio scope</div>
    <div class="mod-w-6 mod-ar-disabled">50% width with aspect ratio disabled</div>
</div>

On specific items, you must add a vertical alignment modifier on container to get proper aspect ratio.

HTML
<div class="my-grid mod-top">
    <div class="mod-w-2 mod-ar-square">16% width with aspect ratio square</div>
    <div class="mod-w-4 mod-ar-widescreen">33% width with aspect ratio widescreen</div>
    <div class="mod-w-6 mod-ar-scope">50% width with aspect ratio scope</div>
    <div class="mod-w-2">16% width</div>
    <div class="mod-w-4">33% width</div>
    <div class="mod-w-6">50% width</div>
</div>