CSS Grid Templates

These website layout templates are built using CSS Grid Layout.

CSS grid layout allows you to create website layouts easily, by using a kind of "ASCII art" syntax. See the grid tutorial to learn how it works. The following templates all use CSS grid layout.

12 Column Grid (Responsive)

12 column grid gold

View Source Code | Preview

12 Column Grid (Mobile First)

12 column grid green

View Source Code | Preview

12 Column Grid Example 2 (Responsive)

12 column grid example 2 gold

View Source Code | Preview

12 Column Grid Example 2 (Mobile First)

12 column grid example 2 green

View Source Code | Preview

12 Column Vertical Grid (Responsive)

12 column vertical grid gold

View Source Code | Preview

12 Column Vertical Grid (Mobile First)

12 column vertical grid green

View Source Code | Preview

Grid Layout 1

CSS grid layout template 1

View Source Code | Preview

Grid Layout 2

CSS grid layout template 2

View Source Code | Preview

Grid Layout 3

CSS grid layout template 3

View Source Code | Preview

Grid Layout 4

CSS grid layout template 4

View Source Code | Preview

Grid Layout 5

CSS grid layout template 5

View Source Code | Preview

Grid Layout 6

CSS grid layout template 6

View Source Code | Preview

Grid Layout 7

CSS grid layout template 7

View Source Code | Preview

Grid Layout 8

CSS grid layout template 8

View Source Code | Preview

Grid Layout 9

CSS grid layout template 9

View Source Code | Preview

Grid Layout 10

CSS grid layout template 10

View Source Code | Preview

Grid Layout 11

CSS grid layout template 11

View Source Code | Preview

Grid Layout 12

CSS grid layout template 12

View Source Code | Preview

Form with Auto Placement

CSS form with auto placement example

View Source Code | Preview

Automatically places each form element into the grid. The grid automatically updates as you add or remove form elements.

Nested Grid

CSS grid repeating with span example

View Source Code | Preview

Grid items can become grids themselves, simply by having display: grid applied to them.

Repeating Grid

CSS grid repeating example

View Source Code | Preview

Uses the repeat() notation to reduce code.

Repeating Grid with Span

CSS grid repeating with span example

View Source Code | Preview

Uses the repeat() notation, and some grid areas span multiple cells.

More:

Customize Your Template

Here are a few ways you can modify your HTML template.