CSS 12 Column Grid layout using 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 Flexbox.

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