CSS 12 Grid Layout

Written By: Avinash Malhotra

Last Updated on

CSS Tutorial rating by Jasmine ⭑ ⭑ ⭑ ⭑ ⭑ Average rating: 5.0, based on 69 reviews
  1. Home
  2. Frontend
  3. CSS
  4. CSS 12 Grid Layout
  1. 12 Grid
  2. 12 Grid psd
  3. Examples

What is 12 Grid

CSS 12 grid layout is based on Photoshop 12 Grids. We can be build CSS 12 grid layout using CSS Flexbox.

A UI Designer/Graphic Designer designs psd for websites. 12 grid is the standard size used to build websites or webpages. 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 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.


*,::before,::after{ margin:0; box-sizing:border-box; }

html{ font-size:15px}
body{ font:16px/1.3 sans-serif;}

.container{ max-width: 1200px; margin: auto; padding: 0 1rem;}

.row{ display:flex; flex-flow: row wrap; margin: 0 -1rem;}

[class^="col-"]{ flex: 1 0 auto; padding: 0 1rem}
.col-1{ flex-basis: 8.33%; max-width: 8.33%;}
.col-2{ flex-basis: 16.66%; max-width: 16.66%;}
.col-3{ flex-basis: 25%; max-width: 25%;}
.col-4{ flex-basis: 33.33%; max-width: 33.33%;}
.col-5{ flex-basis: 41.66%; max-width: 41.66%;}
.col-6{ flex-basis: 50%; max-width: 50%;}
.col-7{ flex-basis: 58.33%; max-width: 58.33%;}
.col-8{ flex-basis: 66.66%; max-width: 66.66%;}
.col-9{ flex-basis: 75%; max-width: 75%;}
.col-10{ flex-basis: 83.33%; max-width: 83.33%;}
.col-11{ flex-basis: 91.66%; max-width: 91.66%;}
.col-12{ flex-basis: 100%; max-width: 100%;}

12 Grid Examples

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">4</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>

12 Grids using CSS Float

12 Grids layout can also be used for IE 10 and below using CSS Float and clear.


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

.container{ max-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;}