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. Try it!

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.

  • Add some free graphics to your template.
  • Modify your template or simply add content with these HTML codes. Simply copy/paste them into your template.
  • Check out these HTML examples for more ideas. You can copy and paste these too.
  • Browse this list of JavaScript examples to add interactivity to your website. Again, you can copy and paste the code.
  • Learn HTML with this HTML tutorial.
  • Learn how to modify your template styles with this CSS tutorial.
  • Learn how to add interactivity to your template with this JavaScript tutorial.
  • Check out our other tutorials by visiting our homepage.