Grid

Concrete uses a unique grid. The markup classes are similar to that of bootstrap, it uses containers , row s and col umns. It's important to remember that these elements don't necessarily need to be nested with in each other. There is some useful examples below of how these classes can be used. If you follow the simple principles below there should be no reason to modify the grid, just the provided variables.

Full Width

If you don't wish to have any margin or padding on your section, don't give it a class at all: Simples.

<!-- Example of full width elements -->
<header></header>
<section></section>
<div></div>
<footer></footer>

Container

The container class is used to stop elements from touching the edges of the window. The container class has a maximum width which is set by the $l breakpoint variable. If you do not wish to be constrained to this width you can add the full class the full class does still apply the $gutter as a margin so will not touch the window edges. If you want your element to touch the window edges check out the Full Width example.

<!-- This element is full width and will touch the screen edges -->
<div></div>

<!-- This element is not full width -->
<div class="container"></div>

<!-- This element is full width but has a $gutter margin -->
<div class="container full"></div>

Row

The row class does not need to be nested within a container . However rows provide spacing below to differentiate div isions within a container. They also help align child column grids with negative margins.

<!-- This will work -->
<div>
  <div class="row"></div>
</div>
<!-- This will also work -->
<div class="container">
  <div class="row"></div>
</div>

By default the row class has a bottom margin equal to $gutter , you will find that in some scenarios this is not desired. Adding a class of .collapse to the row with remove this.

<!-- This will have a bottom margin equal to $gutter -->
<div class="row"></div>

<!-- This will not have a bottom margin -->
<div class="row collapse"></div>

Column

The column class does not need to be nested within a row . However rows counteract column padding with negative margins.

<!-- These columns are not using row they will be indented by $gutter -->
<div class="container">
  <div class="column"></div>
  <div class="column"></div>
</div>

<!-- These columns are using row they will fill the width of the container -->
<div class="container">
  <div class="row">
    <div class="column"></div>
    <div class="column"></div>
  </div>
</div>

Once you have defined a column you can set how many columns wide you want it for which breakpoint.

By default Concrete is a twelve column layout. This is easily modified. You can find out how on the styles page.

<div class="container">
  <div class="row">
    <!-- 4 on large, 2 on medium, 1 on small -->
    <div class="column l3 m6 s12"></div>
    <div class="column l3 m6 s12"></div>
    <div class="column l3 m6 s12"></div>
    <div class="column l3 m6 s12"></div>
  </div>
</div>

By default Concrete is actually desktop first, however many people prefer to work mobile first: Concrete is easily adapted to do this. You can find out how on the styles page.

<!-- by default concrete is desktop first -->
<div class="container">
  <div class="row">
    <!-- 4 on large, 4 on medium, 4 on small -->
    <div class="column l3"></div>
    <div class="column l3"></div>
    <div class="column l3"></div>
    <div class="column l3"></div>
  </div>
</div>

<div class="container">
  <div class="row">
    <!-- 1 on large, 1 on medium, 4 on small -->
    <div class="column s3"></div>
    <div class="column s3"></div>
    <div class="column s3"></div>
    <div class="column s3"></div>
  </div>
</div>