<div class="grid-parent"> /* Parent Element with class (grid-parent) that includes 'display:grid' and other CSS grid properties. */

A : Layouts using CSS Grid. Based on 12 Columns and Infinite Implicit Rows

An easy to implement system, designed to cope with all of the everyday web layouts you'll ever need. Great for quick layout prototyping but robust enough for production website layouts too.

<div class="c12"> ... </div> /* 1st of many child elements of the grid parent */

A : Using the benefits of the implicit CSS Grid

The grid's width is divided into 12 equal columns (12 fractions - FR units). Once those 12 columns have been explicitly filled, a new implicit row is created below. This column for example, spans 7 columns. It's neighbour, to the right, spans 5. With these making a total of 12 (7+5), a new Grid row is started automatically.

<div class="c7"> ... </div>

B : 2 Column Grid Row (Span 5)

As long as your column divisions add-up to make the sum of 12, the nice even-height rows will just keep coming. This whole page is a single grid instance, the crimson letters (ABC ... etc) are only a 'source order' guide to help you better see what's going on.

<div class="c5"> ... </div>

A : CSS 'Class' Based System

The system uses pre-named CSS classes on the CSS Grid's children (typically a DIV element), to determine their column span.

<div class="c4"> ... </div>

B : 3 Column Grid Row (Span 4)

This CSS Grid child DIV element for example, has been given a class of 'c4'. Meaning we want this DIV to span 4 columns (FR units) of the 12.

<div class="c4"> ... </div>

C : 3 Column Grid Row (Span 4)

This DIV also has a class of 'c4', the code's source order means it naturally sits to the right, using the remaining space on the infinitely repeating 12 column row.

<div class="c4"> ... </div>

A : 4 Column Grid Row (Span 3)

<div class="c3"> ... </div>

B : 4 Column Grid Row (Span 3)

<div class="c3"> ... </div>

C : 4 Column Grid Row (Span 3)

<div class="c3"> ... </div>

D : 4 Column Grid Row (Span 3)

<div class="c3"> ... </div>

A : Spanning Columns and Rows

If you want to take advantage of CSS Grid's built-in flexibility, we can easily start spanning rows too.

<div class="c6"> ... </div>

B : 2 Column Grid Row (Span 6 - Row Span 3)

This DIV takes up the remaining 6 columns of the row, but it also spans 3 rows. Adding the class 'r3' is all that's required. We need to keep an eye on the source order though. Think, first 'right' then 'below', see the DIV's display order: A-B-C-D in this section.

<div class="c6 r3"> ... </div>

1 : Nested Grid Example

<div class="c6"> ... </div>

2 : Nested Grid

<div class="c6"> ... </div>

3 : Nested Grid

<div class="c6"> ... </div>

4 : Nested Grid

<div class="c6"> ... </div>

5 : Nested Grid

<div class="c6"> ... </div>

6 : Nested Grid

<div class="c6"> ... </div>

C : 2 Column Grid Row (Span 6)

We need to remember the DIV to the right is occupying half the width over 3 rows, so we've only 6 columns to play with on the left.

<div class="c6"> ... </div>

D : 2 Column Grid Row (Span 6)

This DIV takes the space on the left, of the 3rd row spanned by DIV (B) on the right.

<div class="c6"> ... </div>

A : Any Kind of Layout (Span 3 - Row Span 3)

Having the ability to span both columns and rows means it's easy to design pretty much any layout. Hopefully the CSS classes and letters (A to G) illustrate how this layout section was created.

<div class="c3 r3"> ... </div>

B : (Span 3)

<div class="c3"> ... </div>

C : (Span 3 - Row Span 2)

<div class="c3 r2"> ... </div>

D : (Span 3)

Some Content to see how the grid adjusts when more content is added.

<div class="c3"> ... </div>

E : (Span 3)

Some Content to see how the grid adjusts when more content is added.

<div class="c3"> ... </div>

F : (Span 3 - Row Span 2)

<div class="c3 r2"> ... </div>

G : (Span 6)

<div class="c6"> ... </div>

A : Source Swap

This DIV element 'A' comes before 'B' in the source code, but adding the class 'c-st7' makes it start at column 7. To make the swap, DIV 'B' has the 'start at column 1' class (c-st1)

<div class="c6 c-st7"> ... </div>

B : Source Swap

Occasionly, you might want to change the code 'source order', so that elements are arranged differently when viewed on screen. (BTW, We use 'row dense' so we don't need to count rows for a simple column swap)

<div class="c6 c-st1"> ... </div>

A : 1st in Source Code

Span 4 col, start at col 9

<div class="c4 c-st9"> ... </div>

B : 2nd in Source Code

Span 4 col, start at col 1

<div class="c4 c-st1"> ... </div>

C : 3rd in Source Code

Span 4 col, start at col 5

<div class="c4 c-st5"> ... </div>

A : Asymmetric Layouts - Not a Common Requirement, But ...

As you may know, CSS Grid allows for 'empty' areas. So starting this DIV at column 3 means there's an empty space to the left.

<div class="c7 c-st3"> ... </div>

B :

Just about squeeze this in and span 4 rows.

<div
class
="c1
r4 
c-st9
r-st14"> ...

C : No Room to the Right - Drop Down a Row

This span of 5 columns can't fit in the row above, so it drops down to this next row. These sort of layouts can get messy though. The small DIV (D) to the right would naturally jump up to fit the empty space above ('row dense'), so we give it a 'explicit' start row of 15 (r-st15). Same is true for the DIV (E) far-right - All 4 basic CSS classes used there.

<div class="c5 r3"> ... </div>

D : Row Start Class

<div class="c2 c-st7 
r-st15"> ... </div>

E : All Four CSS Classes

<div class="c3 r2 c-st10
r-st16"> ...

You could consider other CSS grid options for asymmetrical stuff?

Download CSS

GRID.CSS
(2.5Kb)

<div class="c12"> ... </div>

</div> /* Closing Grid Parent Element */