CSS 12 Grid layout using grid and flexbox

12 Grid
12 Grid psd
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 Grids or CSS Flexbox.

A UI Designer/Graphic Designer designs psd or Figma Designs for websites. 12 grid is the standard for desktop and ipads websites or webpages. They use 1200px of container with 1170px content and 1rem padding on left and right sides for spacing. 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

The easiest way to create CSS 12 grid layout is by using CSS Grids. We will create a row element with display: grid and grid-template-columns: repeat(12, 1fr) and gap of 2rem. For each column, use grid-column property with various spans. See example below.


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

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

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

.row{ display:grid; grid-template-columns: repeat(12,1fr); gap: 2rem;}

.col-1{ grid-columns: span 1}
.col-2{ grid-columns: span 2;}
.col-3{ grid-columns: span 3;}
.col-4{ grid-columns: span 4;}
.col-5{ grid-columns: span 5;}
.col-6{ grid-columns: span 6;}
.col-7{ grid-columns: span 7;}
.col-8{ grid-columns: span 8;}
.col-9{ grid-columns: span 9;}
.col-10{ grid-columns: span 10;}
.col-11{ grid-columns: span 11;}
.col-12{ grid-columns: span  12;}

CSS 12 Grid using Flexbox

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 system-ui, 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


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

3 Columns


<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


<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


<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


<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. This technique is deprecated and not recommended for modern browsers and websites. Its was popular during 2013 to 2018.


*{ 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;}