Grid | meshCSS

How it works

mesh uses conventional containers, rows and columns to lay out and align content. It's built with flexbox and is fully responsive. Here's an example:

<div class="container">
    <div class="row">
        <div class="col-12 col-tab-6 col-desk-4 col-hd-3">
            I'm a column, I take up 12 columns at default width, 6 at tablet, 4 at desktop and 3 in hd screens
        </div>
        <div class="col-12 col-tab-6 col-desk-4 col-hd-3">
            I'm a column, I take up 12 columns at default width, 6 at tablet, 4 at desktop and 3 in hd screens
        </div>
        <div class="col-12 col-tab-6 col-desk-4 col-hd-3">
            I'm a column, I take up 12 columns at default width, 6 at tablet, 4 at desktop and 3 in hd screens
        <div class="col-12 col-tab-6 col-desk-4 col-hd-3">
            I'm a column, I take up 12 columns at default width, 6 at tablet, 4 at desktop and 3 in hd screens
        </div>
    </div>
</div>

Grid options

Containers

A container is the wrapper for a row (more on that later) and defines the width of your content. It can be at fixed size or full width, and will gracefully become smaller as screen size gets smaller.

Container options:

A container is at fixed size by default, by using the container tag. With a maximum width set at each side, it will gradually get smaller as the viewport does.
Or a container can be full width, which will take up 100% of the screen and have slight padding either side. This is acheived by adding the container-fullwidth class to a div or semantic element.

Rows

A row is the container for columns, it lives inside a container. It is 100% width of that container and uses flexbox to align columns. Naturally it has no padding but has negative margins on the x axis to counteract the gaps set on the columns.
Add the row class to a div to enable this behaviour.

Row options:

To get rid of the padding on each side of a column, add the no-gaps class to a row. See below:

1

2

3

4

5

6

7

8

9

10

11

12

Columns

A column is where your content lives, which lives inside a row. There can be a maximum of 12 columns in a row, if there are more they will wrap to the next line. Of course you can overwrite this behaviour by using the flex-nowrap class.
The column prefix is col-{modifier}-{amount} where the modifier is the class name for a breakpoint (e.g. mob / tab / desk / hd) and the amount can be from 1 to 12.

Notes:

The default size of a column is defined with col-{amount}, for example col-10 will take up 10 columns at all breakpoints.
The col-auto class will fill up all available space within the row, great if you want a column to have a predefined width (in pixels or ems for example).
The default width of a column is 100%, meaning you can omit col-12 if you always want to take up 12 columns for mobile.

Simple layout:

Here all columns will take up 4 spaces on HD screens, 6 on tablet, and because mesh is built mobile first, they will be 100% width at mobile, even though we didn't specify. The first column will take up 12 columns on tablet. Go ahead and resize the screen to see the effect.

col-tab-12 col-hd-4

col-tab-6 col-hd-4

<div class="container">
    <div class="row">
        <div class="col-tab-12 col-hd-4">
        </div>
        <div class="col-tab-6 col-hd-4">
        </div>
        <div class="col-tab-6 col-hd-4">
        </div>
    </div>
</div>

Auto width columns

With the col-{breakpoint}-auto class, the column will fill based on the content that lives inside it.

col-desk-3

I fill based on what's inside me - col-auto

col-desk-3

<div class="container">
    <div class="row">
        <div class="col-desk-3">
        </div>
        <div class="col-auto"> 
        I fill based on what's inside me
        </div>
        <div class="col-desk-3">
        </div>
    </div>
</div>

Wrapping

If you require a column to wrap to the next line at various viewports, you can use the w-100 class which will effectively create a new line in your grid without using a new row. Sometimes you may not want this at desktop for example, if so, use our display classes - d-desk-none.
You can even add margin to the w-100 like below:

col-6 col-tab-3

col-6 col-tab-3 col-desk-9

<div class="container">
    <div class="row">
        <div class="col-6 col-tab-3">
        </div>
        <div class="col-6 col-tab-3">
        </div>
        <div class="col-6 col-tab-3">
        </div>
        <div class="w-100 mb-1"></div>
        <div class="col-6 col-tab-3">
        </div>
        <div class="col-6 col-tab-3 col-desk-9">
        </div>
    </div>
</div>

Horizontal alignment

CSS alignment can be a nightmare. With mesh, as it's built with flexbox, alignment is easy. Just add one of our flex classes to the row or parent that the content lives in.

To align content centrally add justify-content-center to the row/parent.
To align content at the start of the row/parent add justify-content-start.
To align content at the end of the row/parent add justify-content-end.

justify-content-center

justify-content-start

justify-content-end

<div class="container">
    <div class="row justify-content-center">
        <div class="col-5">
        </div>
    </div>
    <div class="row justify-content-start">
        <div class="col-5">
        </div>
    </div>
    <div class="row justify-content-end">
        <div class="col-5">
        </div>
    </div>
</div>

Vertical alignment

To align content vertically within the container you will need to take advantage of our flex class align-items-*.

To align content centrally add align-items-center to the row/container.
To align content at the start of the row/container add align-items-start.
To align content at the end of the row/container add align-items-end.

align-items-center

align-items-start

align-items-end

<div class="container">
    <div class="row align-items--center">
        <div class="col-5">
        </div>
    </div>
    <div class="row align-items-start">
        <div class="col-5">
        </div>
    </div>
    <div class="row align-items-end">
        <div class="col-5">
        </div>
    </div>
</div>

Offset

Offsetting is a way to push columns along in the row. Columns can be offset in a responsive manner, meaning you can offset columns dependent on viewport.
To offset use offset-{breakpoint}-{amount} where the modifier is the class name for a breakpoint (e.g. mob / tab / desk / hd) and the amount can be from 1 to 12.

col-6 offset-6

col-5 offset-desk-1

col-4

col-6 offset-6 offset-desk-0

<div class="container">
    <div class="row">
        <div class="col-6 offset-6">
        </div>
        <div class="col-5 offset-desk-1">
        </div>
        <div class="col-4">
        </div>
        <div class="col-6 offset-6 offset-desk-0">
        </div>
    </div>
</div>

Variables

You can manipulate the grid columns, breakpoints and gap widths using the variables below.

Variable	Value	Description
`$grid-columns: 12 !default;`	Number	The amount of columns in the grid.
`$gap-width: 15px !default;`	Pixels	How large the space between the columns are.
`$grid-breakpoint-mob: 568 !default; $grid-breakpoint-tab: 768 !default; $grid-breakpoint-desk: 1024 !default; $grid-breakpoint-hd: 1408 !default;`	Pixels (no px)	Defines the width of the breakpoints using max-width, you can add as many as you wish.
`$grid-properties: ( '': 0, '-mob': $grid-breakpoint-mob, '-tab': $grid-breakpoint-tab, '-desk': $grid-breakpoint-desk, '-hd': $grid-breakpoint-hd ) !default;`	String & Variable	Defines the grid breakpoint class values, add and delete, ensure the variable corrosponds to the breakpoint variable above.