Super Simple Grids Using CSS Grid
Tags: css, html, cssgrid
Published: 2018-09-13 22:23:51

---
title: Super Simple Grids Using CSS Grid
published: true
description: Quickly and easily implement a 12 column grid from scratch, using CSS Grid
tags: css, html, css grid
---

Today we'll be experimenting with CSS Grid and see how easy it is to create a 12 column grid from scratch. If you've ever used a CSS framework before, most likely it came with some sort of grid system for quick and uniform layouts. With CSS Grid, it's super simple to create our own 12 column grid.

Here is a preview of the final product: http://cssgrid-demo.surge.sh/

Let's start off with some very basic html

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
  </head>
  <body>
    <div class="container">
      <div class="grid-wrapper">
        <div class="col-4">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit ultricies vehicula. Curabitur iaculis, risus vel egestas pellentesque, magna eros fermentum massa, et eleifend sapien purus id dui. Pellentesque consectetur imperdiet dui ac tristique. Nulla non egestas dui. Nulla semper diam est. Morbi tincidunt eros non nisi pretium vehicula. Integer semper vulputate sem eu molestie. Fusce aliquet viverra est, sit amet blandit nibh tristique commodo. Nulla eget elit in lacus luctus iaculis et in ipsum. Curabitur et consectetur sapien.</p>
        </div>
        <div class="col-4">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit ultricies vehicula. Curabitur iaculis, risus vel egestas pellentesque, magna eros fermentum massa, et eleifend sapien purus id dui. Pellentesque consectetur imperdiet dui ac tristique. Nulla non egestas dui. Nulla semper diam est. Morbi tincidunt eros non nisi pretium vehicula. Integer semper vulputate sem eu molestie. Fusce aliquet viverra est, sit amet blandit nibh tristique commodo. Nulla eget elit in lacus luctus iaculis et in ipsum. Curabitur et consectetur sapien.</p>
        </div>
        <div class="col-4">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit ultricies vehicula. Curabitur iaculis, risus vel egestas pellentesque, magna eros fermentum massa, et eleifend sapien purus id dui. Pellentesque consectetur imperdiet dui ac tristique. Nulla non egestas dui. Nulla semper diam est. Morbi tincidunt eros non nisi pretium vehicula. Integer semper vulputate sem eu molestie. Fusce aliquet viverra est, sit amet blandit nibh tristique commodo. Nulla eget elit in lacus luctus iaculis et in ipsum. Curabitur et consectetur sapien.</p>
        </div>
      </div>
    </div>
  </body>
</html>
```

This html structure should look fairly familiar if you've ever worked with a grid system in the past. The `container` can have a max-width applied or remain at 100% for a fluid layout. The `grid-wrapper` will start a section for our columns and the `col-#` represent the actual columns. If we want 3 identical columns, we'll need to use `col-4` since this is a 12 column grid. The column numbers must add up to equal 12.

Now let's write the CSS and implement CSS Grid

```css
.container {
  padding: 0 1rem;
  margin: 0 auto;
}
@media screen and (min-width: 992px) {
  .container {
    max-width: 1140px;
  }
  .grid-wrapper {
    display: grid;
    grid-gap: 0 2rem;
    grid-template-columns: repeat(12, 1fr);
    margin: 0 auto;
    width: 100%;
  }
  .col-1 { grid-column: span 1; }
  .col-2 { grid-column: span 2; }
  .col-3 { grid-column: span 3; }
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; }
  .col-8 { grid-column: span 8; }
  .col-9 { grid-column: span 9; }
  .col-10 { grid-column: span 10; }
  .col-11 { grid-column: span 11; }
  .col-12 { grid-column: span 12; }
}
```

The CSS is mobile first, so any devices under 992px won't have the grid layout. As you can see, most of the magic happens in the `.grid-wrapper` class. Here we specify the `grid-template-columns`, which repeats 12 equal columns. The `grid-gap` is the space between the columns. We then create a class for each of the columns and tell them how many grid columns they should span.

I hope this snippet of code was useful in creating a quick grid layout without the use of a CSS framework. Feel free to customize and experiment with different grid columns and gap sizes!

Check out https://codebushi.com/ for more of my web development tips and resources.