A very simple CSS grid layout system!
get it at GitHub
Add class="row"
to any element to turn it into a grid container:
<div class="row"> <!-- 12 children = 12 columns --> <div>1</div> <div>2</div> <div>3</div> ... <div>12</div> </div>
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.
<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>
To span more than one column, use col-2
to col-16
.
For example class="col-2"
for a two column span:
<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>
If a column needs to start at a particular location, simply add an empty div of the desired column width:
<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>
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:
<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>
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:
<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>
<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>