What is 12 Grid

CSS 12 grid layout is based on Photoshop 12 Grids. We can be build CSS 12 grid layout using CSS float and clear.

A Graphic Designer designs psd for website. 12 grid is the standard size used to build a website. They consider 1200px of container with 1170px content and 15px padding on both sides. The size of single column is 70px and and 30px is gutter (i.e. gap between two columns). See image below for reference.

12 Grids on Photoshop

CSS 12 Grid
CSS 12 Grids Layout

CSS Code for 12 grid

CSS code for 12 grid layout. We are using percentage instead of pixels for columns sizes so that the same code will be used for responsive layout.


*{ margin:0; box-sizing-border-box; }
body{ font-family:sans-serif}

.container{ width: 1200px; margin: auto; padding: 0 15px;}

.row{ margin: 0 -15px;}
.row:after{ content: ""; display: block; clear: both}

.col-1{ width: 8.33%; float: left; padding: 0 15px;}
.col-2{ width: 16.66%; float: left; padding: 0 15px;}
.col-3{ width: 25%; float: left; padding: 0 15px;}
.col-4{ width: 33.33%; float: left; padding: 0 15px;}
.col-5{ width: 41.66%; float: left; padding: 0 15px;}
.col-6{ width: 50%; float: left; padding: 0 15px;}
.col-7{ width: 58.33%; float: left; padding: 0 15px;}
.col-8{ width: 66.66%; float: left; padding: 0 15px;}
.col-9{ width: 75%; float: left; padding: 0 15px;}
.col-10{ width: 83.33%; float: left; padding: 0 15px;}
.col-11{ width: 91.66%; float: left; padding: 0 15px;}
.col-12{ width: 100%; float: left; padding: 0 15px;}

HTML Code

Inside body, use a container class which is 1200px with 1170px content. Add row class inside container and then add column inside row. The sum of column in a single row should be 12.

For example, for two equal column, use col-6 two times.

2 Columns

6
6

<div class="container">
    <div class="row">
        <div class="col-6">6</div>
        <div class="col-6">6</div>
    <div>
</div>

3 Columns

4
4
4

<div class="container">
    <div class="row">
        <div class="col-4">4</div>
        <div class="col-4">4</div>
        <div class="col-4">46</div>
    <div>
</div>

4 Columns

3
3
3
3

<div class="container">
    <div class="row">
        <div class="col-3">3</div>
        <div class="col-3">3</div>
        <div class="col-3">3</div>
        <div class="col-3">3</div>
    <div>
</div>

2 Columns with 25% and 75% width

3
9

<div class="container">
    <div class="row">
        <div class="col-3">3</div>
        <div class="col-9">9</div>
    <div>
</div>

3 Columns with 25%, 50%, and 25% width

3
6
3

<div class="container">
    <div class="row">
        <div class="col-3">3</div>
        <div class="col-6">6</div>
        <div class="col-3">3</div>
    <div>
</div>