# Grid

The grid module provides you with a modern, responsive grid system based on the Flexible Layout Module (commonly known as flexbox). The structure of the grid is simple and logical, allowing you to quickly build your pages from scratch. Setting the layout for a page is easy and will behave the way you want them to on mobile devices and smaller screens.

All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.

## Quick overview

Easy page layout is one of the main advantages of using a CSS framework over writing your own styles. The grid module utilizes the Flexbox Layout to provide you with a modern and responsive layout grid system for all your needs. Rules in the grid module help you create basic fluid containers for your grid and allow you to design layouts that work well on all screen sizes using a simple row and column structure. The grid system contains definitions for both fluid columns that resize according to their siblings and columns with preset sizes on different screen sizes, as well as rules that allow you to offset or move certain columns to the first or last place on the grid's row on different devices, helping you present the page in a different layout without duplicating any content. All of the rules in the module are built around accessibility, so screen readers can easily read you pages.

## Quick start

To use the grid module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's `<head>` to utilize the viewport meta tag:

    <meta name="viewport" content="width=device-width, initial-scale=1">

mini.css grids tutorial by Per Harald Borgen

## Basic layout

1
11
2
10
3
9
4
8
5
7
6
6
12
fluid
fluid

The grid system's basic layout is composed of three components, presented below in the order they should be added to the DOM tree:

1. The grid's `.container` is the outermost layer of your grid system. It is a fluid container that wraps the flexible grid system inside it.
2. Inside the container, `.row`s are added to specify each row of the grid layout. Rows serve to provide you with a simple basis for your layout's columns.
3. Finally, inside the rows, `.col-` elements are added for the columns. The columns are a little bit more complex than the container and rows, as they are what makes the layout respond to changes. There are two basic ways to define a column for your layout:
   - using `.col-SCR_SZ` to specify fluid columns, replacing `SCR_SZ` with one of the available screen size names (`sm` for smaller screens, `md` for medium-sized screens or `lg` for larger screens).
   - using `.col-SCR_SZ-COL_WD` to specify columns with fixed width, replacing `SCR_SZ` with one of the available screen size names and `COL_WD` with a number from `1` to `12` specifying the width of the column (`1` meaning 1/12 of the width of the row and `12` meaning 100% of the width of the row).

### Sample code

The sample code is a bit lengthy, so we hid it by default to make it easier for mobile device users to read this page. Click or tap on Show sample code below to see the code sample for this example. Also, the example presented showcases the grid system's syntax for smaller screens, but you can do the same thing for any screen size.

Show sample code

    <div class="container">
      <div class="row">
        <div class="col-sm-1">
        </div>
        <div class="col-sm-11">
        </div>
      </div>
      <div class="row">
        <div class="col-sm-2">
        </div>
        <div class="col-sm-10">
        </div>
      </div>
      <div class="row">
        <div class="col-sm-3">
        </div>
        <div class="col-sm-9">
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4">
        </div>
        <div class="col-sm-8">
        </div>
      </div>
      <div class="row">
        <div class="col-sm-5">
        </div>
        <div class="col-sm-7">
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6">
        </div>
        <div class="col-sm-6">
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
        </div>
      <div class="row">
        <div class="col-sm">
        </div>
        <div class="col-sm">
        </div>
      </div>
    </div>

### Notes

- mini.css uses a mobile-first approach in its grid system. This means that specifying a layout for smaller device sizes will apply the same layout on medium-sized and larger screens, so you do not have to rewrite the same layout for all three screen sizes. However, if you want to change the layout on different screen sizes, check the section below.
- The grid module is compatible with modern browsers, but might not display properly in older browsers.
- The specific breakpoints for small, medium and large screen sizes are as follows:
  - small: less than `768px` wide
  - medium: more than or equal to `768px` wide but less than `1280px` wide
  - large: `1280px` wide or more
- Fluid columns can be used for sizes that are not of the form `100%/12×X` where `X` an integer value between `1` and `12`. For example, if you have 7 `.col-sm` elements in one row, each of the elements will have a width of 1/7th the width of the row.

    <div class="col-sm">
      <div class="container">
      </div>
    </div>
    <!-- or -->
    <div class="col-sm">
      <div class="row">
      </div>
    </div>

Do: A column can contain a container or a row inside it. The container can also be skipped if inside a column, so you only need to add a row.

    <div class="col-sm">
      <div class="col-sm">
      </div>
    </div>

Don't: Avoid using columns inside columns without a row wrapping them. Either make the outer column a row in itself or wrap the inside columns in a row.

    <div class="col-sm row">
      <div class="col-sm-6">
      </div>
      <div class="col-sm-6">
      </div>
    </div>

Do: A column can also be a row at the same time, if you want to include sub-columns inside it. You can make the same element both a column in its own row and a row for its containing columns. The same idea can be applied for the container. Containers can, however, be omitted, when already inside a grid.

    <div class="row">
      <p>Content without columns...</p>
    </div>

Don't: Avoid using rows with content inside that is not wrapped in columns. Try to use a single `.col-sm` to wrap the content inside these, otherwise there might be unexpected behavior.

    <div class="row">
      <div class="col-sm">
      <div>
      <div class="col-sm-4">
      </div>
     </div>
    <!-- or -->
    <div class="row">
      <div class="col-sm-12">
      <div>
      <div class="col-sm-12">
      </div>
    </div>

Do: Mix fluid columns with fixed, if you like. Fluid columns will adapt to the size of the container left for them. You can also use columns with a total size of more than `12`, meaning with a total width of over 100%. The remaining content will flow below the rest, allowing you to specify multiple blocks of content inside the same row if you need to.

    <div class="container">
      <div class="row">
        <div class="col-sm">
        <div>
        </div>
      <p>Normal paragraph.</p>
    </div>
    <!-- or -->
    <div class="row">
      <div class="col-sm">
      </div>
      <p>Normal paragraph.</p>
    </div>

Don't: Avoid mixing rows and columns with normal content that is not wrapped on the respective level of the grid system. Always wrap content inside the proper containers (container, row or column) in your grid layout.

## Screen-specific layouts

#### Small screen layout

#### Medium/Large screen layout

You can specify different layouts for your pages and web apps, using the grid system's columns. To do this add classes to your columns for different screen sizes, using either the fluid column syntax (`.col-SCR_SZ`) or the fixed width column syntax (`.col-SCR_SZ-COL_WD`) or even both.

### Sample code

    <div class="container">
      <div class="row">
        <div class="col-sm">
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12 col-md-3 col-lg-2">
        </div>
        <div class="col-sm-12 col-md-5 col-lg-7">
        </div>
        <div class="col-sm-12 col-md-4 col-lg-3">
        </div>
      </div>
      <div class="row">
        <div class="col-sm">
        </div>
      </div>
    </div>

### Notes

- Leaving a column's size unspecified for a resolution will use the style applied for the previous largest resolution recursively.
- Changing the layout for different screen sizes can sometimes require complex content realignment, offsetting and reordering. For these features, check the sections below.

    <div class="row">
      <div class="col-sm-12 col-md-6">
      </div>
      <div class="col-sm-12 col-md-6">
      </div>
    </div>

Do: You can radically change the layout of your content for different displays. Laying out your content vertically in `.col-sm-12`s for small devices and then compacting it to `.col-md-6`s for medium displays is pretty common. If your columns exceed a total size of `12` on some displays, they will wrap accordingly, so do not worry.

    <div class="row">
      <div class="col-sm-12 col-md-6">
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 col-md-6">
      </div>
    </div>

Don't: If you want to place two columns side by side on some displays, but not on others (e.g. placing them vertically on smaller displays, then next to each other on medium-sized or larger displays), place them in one row, not multiple, otherwise you will not achieve the desired effect.

    <div class="row">
      <div class="col-sm col-lg-3">
      </div>
      <div class="col-sm-6 col-md-8">
      </div>
    </div>

Do: Specify only the screen-specific column sizes that you need. You can omit the medium-sized screens' size from a column if its layout on smaller screens is fluid or should be the same as in medium-sized displays. Or, if your larger screen layout is the same as your medium-sized screen layout, you can omit the class for the larger screen.

    <div class="row">
      <div class="col-md">
      </div>
      <div class="col-lg">
      </div>
    </div>

Don't: Never omit the class needed for the smallest screen size you have (`.col-sm` or `.col-sm-COL_WD`), otherwise the column's layout on smaller displays might behave unexpectedly. You can, however, omit layout for the other two screen sizes if you want.

## Predefined layouts

Some simple grid layout problems can be solved using predefined layouts. To use a predefined layout, simply add a predefined layout class to a `.row` element. Predefined classes can be written using one of two syntaxes, similar to normal column classes:

- fluid column layouts can be specified using `.cols-SCR_SZ`, replacing `SCR_SZ` with one of the available screen size names.
- fixed width columns layouts can be specified using `.col-SCR_SZ-COL_WD`, replacing `SCR_SZ` with one of the available screen size names and `COL_WD` with a number from `1` to `12` specifying the width of the columns.

### Sample code

    <div class="row cols-sm-6">
      <div>
        <p>col-sm-6</p>
      </div>
      <div>
        <p>col-sm-6</p>
      </div>
    </div>

### Notes

- Predefined layouts can be combined with most of the features of the grid system, such as offsets and reordering.
- If you use a fluid predefined layout, its columns will always be placed in one row.
- Not specifying a predefined layout for a resolution will use the style applied for the previous largest resolution recursively.

    <div class="row cols-sm-12 cols-md-6">
      <div>
        <p>col-sm-12, col-md-6</p>
      </div>
      <div>
        <p>col-sm-12, col-md-6</p>
      </div>
    </div>

Do: You can add multiple predefined layout classes for different screen sizes, allowing you to build responsive predefined layouts.

    <div class="row cols-sm-6">
      <div class="row cols-sm-7">
        <p>col-sm-6</p>
      </div>
      <div class="row cols-sm-5">
        <p>col-sm-6</p>
      </div>
    </div>

Don't: Avoid using the normal column classes in conjunction with predefined layouts, as they will most likely not apply and can sometimes cause unexpected behavior.

## Column offsets

size = 8, offset = 2
size = 6, offset = 3
size = 4, offset = 4
size = 4, offset = 1
size = 4, offset = 2

If you want to move columns to the right, you can use the offset classes on your columns. Offset classes use the `.col-SCR_SZ-offset-COL_WD` syntax, where `SCR_SZ` is one of the available screen size names (`sm`, `md` or `lg`) and `COL_WD` a number from `0` to `11` specifying the width of the column's offset. Offsets can also be used in combination with screen-specific layouts and column sizes, providing you with greater flexibility when spacing out your content.

### Sample code

The example presented below showcases the grid system's offsetting syntax for smaller screens, but you can do the same thing for any screen size.

    <div class="container">
      <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
        </div>
      </div>
    <div class="row">
        <div class="col-sm-4 col-sm-offset-4">
        </div>
    </div>
      <div class="row">
        <div class="col-sm col-sm-offset-1">
        </div>
      <div class="row">
        <div class="col-sm-4 col-sm-offset-1">
        </div>
        <div class="col-sm-4 col-sm-offset-2">
        </div>
      </div>
    </div>

### Notes

- Columns with offsets and columns without offsets can be mixed for better results. In fact, we strongly suggest you try that.
- Remember to specify a basic layout and/or screen specific layouts in addition to the offset classes.

    <div class="row">
      <div class="col-sm col-md-offset-1 col-md-5 col-lg-4">
      </div>
      <div class="col-sm col-md-5 col-lg-4 col-lg-offset-2">
      </div>
    </div>

Do: You can specify offset classes when you need them and omit them otherwise. This means that, if you want to offset a column only on a medium-sized or a larger screen, you can just specify the offset for that specific screen. Specifying an offset for a smaller screen, however, will apply it to medium-sized and larger screens as well, medium-sized screen offsets will apply to larger screens etc. similar to how the layout system works.

    <div class="row">
      <div class="col-sm col-md-10 col-offset-1 col-lg col-lg-offset-0">
      </div>
    </div>

Do: To remove a previously applied offset from a column (i.e. one applied from the layout from a smaller screen size) or to make sure no offsets are active on a column, you can use the `.col-SCR_SZ-offset-0` class, replacing `SCR_SZ` with the desired screen size, effectively resetting all offsets.

## Column reordering

first
normal
last

Additionally, if you want to reorder your columns, you can do that to some extent using the `.col-SCR_SZ-first`, `.col-SCR_SZ-last` and `.col-SCR_SZ-normal` classes to your columns, replacing `SCR_SZ` with one of the available screen size names (`sm`, `md` or `lg`). These classes will change the ordering of your columns appropriately to allow you to move content around any way you want (e.g. moving a navigation sidebar from the left of the content on larger displays to the end of the content on smaller displays).

### Sample code

    <div class="container">
      <div class="row">
        <div class="col-sm col-md-last col-lg-normal">
        </div>
        <div class="col-sm-first col-md-normal">
        </div>
        <div class="col-sm col-md-first col-lg-normal">
        </div>
      </div>
    </div>

### Notes

- Columns are ordered by default in order of appearance. You should only apply column reordering classes to the columns you want to reorder on the screen-specific layouts you need them.
- Remember to specify a basic layout and/or screen specific layouts in addition to the column reordering classes.
- Column reordering is applied from smaller to larger screens, similar to how column layout and offsetting work.

    <div class="row">
      <div class="col-sm col-md-last">
      </div>
      <div class="col-sm col-md-last">
      </div>
      <div class="col-sm">
      </div>
    </div>

Do: You can use multiple `.col-SCR_SZ-first`s and `.col-SCR_SZ-last`s, replacing `SCR_SZ` with the desired screen size, in the same row for the same screen size. If you specify more than one column to be first or last, the columns with the same order will be placed at the beggining or end of the row and the order between them will be determined based on their order of appearance in the DOM tree afterwards.

    <div class="row">
      <div class="col-sm-last col-md-normal">
      </div>
      <div class="col-sm">
      </div>
    </div>

Do: To remove a previously applied reorder from a column (i.e. one applied from the layout from a smaller screen size) or to make sure no reordering is active on a column, you can use the `.col-SCR_SZ-normal` class, replacing `SCR_SZ` with the desired screen size, effectively resetting all reorders. You do not, however, need to add this class to all other columns or use it when there are no reorders applied.

## Media object pattern

### Media object heading

This is an example implementation of the popular media object pattern, using simple grid rules.

Last, but not least, you can use the grid system's classes to create a media object in one of many ways, based on your needs. The simplest way to implement a media object is using two columns, one for the media (i.e. `<img>`) and one for the textual content next to the media.

### Sample code

    <div class="row">
      <div class="col-sm-1">
        <img src="...">
      </div>
      <div class="col-sm">
        <h2>Media object heading</h2>
        <p>Media object content...</p>
      </div>
    </div>

### Notes

- The media object is not a different component, but rather a popular pattern that can be implemented using the standard grid system classes.
- You can use many different elements for your media object. For example, you can make the right side of the media object contain a form or an input field.

    <div class="row">
      <div class="col-sm-1 col-md-2 col-lg-3">
        <img src="...">
      </div>
      <div class="col-sm-11 col-md-10 col-lg-9">
        <h2>Media object heading</h2>
        <p>Media object content...</p>
      </div>
    </div>

Do: You can make your media object responsive, by adding screen-specific layout classes to its columns.

    <div class="row">
      <div class="col-sm-1 col-sm-last">
        <img src="...">
      </div>
      <div class="col-sm">
        <h2>Media object heading</h2>
        <p>Media object content...</p>
      </div>
    </div>

Do: You can align the media object's content to the left of the image (instead of the other way round), using the `.col-SCR_SZ-normal` class, replacing `SCR_SZ` with the desired screen size.

    <div class="row">
      <div class="col-sm-2">
        <img src="...">
      </div>
      <div class="col-sm">
        <div class="row">
          <div class="col-sm">
            <h2>Parent media object</h2>
            <p>Parent media object content...</p>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-2">
            <img src="...">
          </div>
          <div class="col-sm">
            <h2>Child media object</h2>
            <p>Child media object content...</p>
          </div>
        </div>
      </div>
    </div>

Do: Media objects can be easily nested. You can use `.row` elements in the content column of the media object to make everything align perfectly.

    <div class="row">
      <img src="..." class="col-sm-1">
      <div class="col-sm">
        <h2>Media object heading</h2>
        <p>Media object content...</p>
      </div>
    </div>

Don't: Do not apply a column class directly to the media element (e.g.`<img>`) or the content of the media object, as this can cause problems with certain elements. Wrap your media objects columns in `<div>` elements and apply the grid classes to them, instead.

If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.