boxgrid.css

A very simple CSS grid layout system!

get it at GitHub

Basic automatic grid

Add class="row" to any element to turn it into a grid container:

code

<div class="row"> <!-- 12 children = 12 columns -->
  <div>1</div>
  <div>2</div>
  <div>3</div>
  ...
  <div>12</div>
</div>

Any number of columns between 1 and 16

Use class="row c3" for three columns. Or c5 for five columns. Anything up to c16.

You can add more children to the grid container, they will keep following the grid.

first

second

third

fourth

fifth

code

<div class="row c3"> <!-- c3 = three columns -->
  <div>first</div>
  <div>second</div>
  <div>third</div>
  <div>fourth</div> <!-- 4th child starts a new row -->
  <div>fifth</div>
</div>

Span columns

To span more than one column, use col-2 to col-16. For example class="col-2" for a two column span:

first column

second column

third column

fourth

fifth

code

<div class="row c3">
  <div>first column</div>
  <div>second column</div>
  <div>third column</div>
  <div class="col-2">fourth</div> <!-- col-2 = span two columns -->
  <div>fifth</div>
</div>

Empty spaces

If a column needs to start at a particular location, simply add an empty div of the desired column width:

four

eight

one

ten

one

seven

code

<div class="row c12">
  <div class="col-4">four</div>
  <div class="col-8">eight</div>
  <div class="col-1">one</div>
  <div class="col-10">ten</div>
  <div class="col-1">one</div>
  <div class="col-1">one</div>
  <div class="col-3 blank"></div> <!-- empty space -->
  <div class="col-7">seven</div>
</div>

Forms

The container element does not need to be a div. You can add the row and col classes directly to a form and its inputs:

code

<form class="row c12">
  <input type="text" class="col-6" name="firstName" placeholder="first name"/>
  <input type="text" class="col-6" name="lastName" placeholder="last name"/>
  <input type="text" class="col-10" name="street" placeholder="street"/>
  <input type="text" class="col-2" name="number" placeholder="number"/>
  <input type="text" class="col-3" name="zip" placeholder="zip code"/>
  <input type="text" class="col-9" name="city" placeholder="city"/>
  <button type="submit" class="col-3">Save</button>
  <button type="button" class="col-3">Cancel</button>
</form>

Gap between columns and rows

The default gap is 0.25rem wide. For a different gap use g0 (no gap) up to g16 (4rem). Use class="g4" for a 1rem gap:

code

<div class="row c12 g4"> <!-- g4 = 1rem gap -->
  <div class="col-5">1</div>
  <div class="col-3">2</div>
  <div class="col-4">3</div>
  <div class="col-5">4</div>
  <div class="col-7">5</div>
</div>

Nested grids

left

3.1

3.2

right

code

<div class="row c12">
  <div class="col-2">left</div>
  <div class="col-8 row"> <!-- nested -->
    <div>1</div>
    <div>2</div>
    <div class="row c12"> <!-- nested -->
      <div class="col-4">3.1</div>
      <div class="col-8">3.2</div>
    </div>
  </div>
  <div class="col-2">right</div>
</div>