How to Create a Grid in HTML & CSS – A Beginner’s Guide

INTRODUCTION

MOVE ASIDE, TABLES.

Welcome to a tutorial on how to create a grid in HTML and CSS. What tables? That is so “old school”, and we now have CSS grids to do all the layout magic. No more funky CSS hacks and complicated Javascript code.

To create a simple grid in HTML and CSS, all we need is to set a container to display grid and set the number of columns. For example:

  • .agrid { display: grid; grid-template-columns: repeat(3, auto); }
  • <div class=”agrid”> <div>1</div> <div>2</div> <div>3</div> </div>

Yes, it is actually pretty easy to create a grid these days using just CSS. So in this guide, we will walk through how to create grids step-by-step – Read on to find out!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

 

SECTION A

DOWNLOAD & NOTES

First, here is the download link to the example source code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

There is nothing to install, so just download and unzip into a folder. If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

SECTION B

CREATING GRIDS

Alright, let us now dive into the mechanics of creating grids – Step-by-step.

 

1) BASIC GRID – BY COLUMNS

THE HTML

1-col.html
<!DOCTYPE html>
<html>
  <head>
    <title>Basic Grid Column</title>
    <link rel="stylesheet" type="text/css" href="1-col.css">
  </head>
  <body>
    <div id="grid-col">
      <div class="cell">Cell</div>
      <div class="cell">Cell</div>
      <div class="cell">Cell</div>
      <div class="cell">Cell</div>
      <div class="cell">Cell</div>
      <div class="cell">Cell</div>
    </div>
  </body>
</html>

Yep, the HTML of a basic grid is as simple as that – Create a container <div id="grid-col">, and put the grid cells <div class="cell"> inside. That’s all.

 

 

THE CSS

1-basic-grid.css
/* (A) SET CONTAINER TO GRID */
#grid-col {
  display: grid;
  grid-template-columns: auto auto auto; /* 3 COL LAYOUT */

  /* WE CAN ALSO SPECIFY EXACT PX OR %
  grid-template-columns: 200px 250px 150px;
  grid-template-columns: 20% 40% 40%;
  */

  /* THE EASIER WAY TO MASS REPEAT MANY COLUMNS
  grid-template-columns: repeat(4, 250px);
  grid-template-columns: repeat(4, auto);
  */
}
 
/* (B) STYLE EACH GRID CELL */
div.cell {
  background: #feffc4;
  border: 1px solid #aaa;
  padding: 10px;
}
 
/* (C) RESPONSIVE SUPPORT */
/* 2 COL LAYOUT ON TABLET */
@media screen and (max-width: 1000px) {
  #grid-col {
    grid-template-columns: auto auto; 
  }
}
/* 1 COL LAYOUT ON MOBILE */
@media screen and (max-width: 600px) {
  #grid-col {
    grid-template-columns: 100%;
  }
}

The CSS may look complicated at first, but the raw essentials are:

  • Set the grid container #grid-col to display: grid.
  • Then use grid-template-columns: auto auto auto to control the number of columns the grid has; In this case, we have 3 columns in this grid.
  • Take note – auto will leave it to the browser to determine the width of the columns. We can also specify exact px or %.
  • Finally, we add media query @media screen and (max-width: XYZpx) to add support for mobile devices – Simply change grid-template-columns so that there are fewer grid items per row on a small screen.

Yep, that is how easy it is to create a basic grid.

 

2) GRID ROWS

2-row.css
/* (A) SET CONTAINER TO GRID */
#grid-row {
  display: grid;
  grid-template-columns: auto auto auto; /* 3 COL LAYOUT */

  /* WE CAN CONTROL THE HEIGHT OF ROWS AS WELL. 
     BY DEFAULT, ALL ROWS ARE ALREADY AUTO 
     SO IT MAKES NO SENSE TO DEFINE AUTO:
     grid-template-rows: auto auto auto auto;
  */

  /* THIS IS WHAT TO DO IF WE WANT TO CONTROL THE HEIGHT */
  /* NOTE - ROW 4 ONWARDS WILL BE AUTO */
  grid-template-rows: 50px 100px 200px;

  /* SAME AS COLUMNS, WE USE REPEAT AS WELL
  grid-template-rows: repeat(4, 50px);
  */
}

/* (B) STYLE EACH GRID CELL */
div.cell {
  background: #feffc4;
  border: 1px solid #aaa;
  padding: 10px;
}

/* (C) RESPONSIVE SUPPORT */
/* 2 COL LAYOUT ON TABLET */
@media screen and (max-width: 1000px) {
  #grid-row {
    grid-template-columns: auto auto; 
  }
}
/* 1 COL LAYOUT ON MOBILE */
@media screen and (max-width: 600px) {
  #grid-row {
    grid-template-columns: 100%;
  }
}

If we can control the width of columns, then we can also control the height of rows as well –

  • Just like the columns, use grid-template-rows to control the height.
  • By default, the rows are already set to auto. So don’t bother to define grid-template-rows unless you want a specific height for a certain row.

 

 

3) CELL GAPS

3-gap.css
/* (A) SET CONTAINER TO GRID */
#grid-gap {
  display: grid;
  grid-template-columns: auto auto auto; /* 3 COL LAYOUT */
  grid-template-rows: 50px 100px 200px;

  /* SET SPACING IN-BETWEEN CELLS */
  grid-column-gap: 10px;
  grid-row-gap: 30px;

  /* OR SIMPLY SET A UNIFORM SPACING
  grid-gap: 20px;
  */
}

/* (B) STYLE EACH GRID CELL */
div.cell {
  background: #feffc4;
  border: 1px solid #aaa;
  padding: 10px;
}

/* (C) RESPONSIVE SUPPORT */
/* 2 COL LAYOUT ON TABLET */
@media screen and (max-width: 1000px) {
  #grid-gap {
    grid-template-columns: auto auto; 
  }
}
/* 1 COL LAYOUT ON MOBILE */
@media screen and (max-width: 600px) {
  #grid-gap {
    grid-template-columns: 100%;
  }
}

Don’t want the cells to be packed too close together?

  • Use grid-column-gap to control the spacing in-between cells horizontally.
  • Use grid-row-gap to control the spacing in-between cells horizontally.
  • Or simply apply a uniform spacing using grid-gap.

 

4) GRID LINES

THE BASIC IDEA

We have only created an “equal grid” so far, but what if we want a cell to span across more than one row or column? Introducing grid lines:

  • Imagine “invisible” lines running across the grid.
  • The lines that run from left to right are called the column lines – Starting from line number 1 on the far left.
  • The lines that run from top to bottom are called the row lines – Starting from line number 1 on the topmost.
  • To span a cell across many columns, we specify grid-column-start and grid-column-end.
  • To span a cell across many rows, we specify grid-row-start and grid-row-end.

 

 

SPANNING ACROSS COLUMNS

4a-lines-col.html
<!DOCTYPE html>
<html>
  <head>
    <title>Basic Grid Lines</title>
    <link rel="stylesheet" type="text/css" href="4a-lines-col.css">
  </head>
  <body>
    <div id="grid-line">
      <div class="cell">Cell</div>
      <div class="cell">Cell</div>
      <div class="cell">Cell</div>
      <div class="cell spancol">
        This one will span from column line 1 to 4.
      </div>
      <div class="cell">Cell</div>
      <div class="cell">Cell</div>
      <div class="cell">Cell</div>
    </div>
  </body>
</html>
4a-lines-col.css
/* (A) USUAL GRID */
#grid-line {
  display: grid;
  grid-template-columns: auto auto auto; /* 3 COL LAYOUT */
  grid-gap: 10px;
}
div.cell {
  background: #feffc4;
  border: 1px solid #aaa;
  padding: 10px;
}

/* (B) SPAN MULTIPLE ROWS & COLUMNS */
.spancol {
  grid-column-start: 1;
  grid-column-end: 4;
}

SPANNING ACROSS ROWS

4b-lines-row.html
<!DOCTYPE html>
<html>
  <head>
    <title>Basic Grid Lines</title>
    <link rel="stylesheet" type="text/css" href="4b-lines-row.css">
  </head>
  <body>
    <div id="grid-line">
      <div class="cell">Cell</div>
      <div class="cell">Cell</div>
      <div class="cell">Cell</div>
      <div class="cell spanrow">
        This will span across row line 2 to 4.
      </div>
      <div class="cell">Cell</div>
      <div class="cell">Cell</div>
      <div class="cell">Cell</div>
      <div class="cell">Cell</div>
    </div>
  </body>
</html>
4b-lines-row.css
/* (A) USUAL GRID */
#grid-line {
  display: grid;
  grid-template-columns: auto auto auto; /* 3 COL LAYOUT */
  grid-gap: 10px;
}
div.cell {
  background: #feffc4;
  border: 1px solid #aaa;
  padding: 10px;
}

/* (B) SPAN MULTIPLE ROWS */
.spanrow {
  grid-row-start: 2;
  grid-row-end: 4;
}

 

 

5) GRID TEMPLATE AREAS

THE BASICS

So far so good? You should be able to do plenty of “good enough” CSS grid yoga by now. But here is one last piece to the basics of CSS grid – An alternate way to create a grid by defining a template and specifying areas. For example:

Yep, that is essentially a 4 columns 3 rows grid… But we have specified which cell is which area.

THE CSS

5-template-area.css
/* (A) THE CONTAINER */
#grid-layout {
  display: grid;
  grid-gap: 10px;
  /* DESIGN YOUR GRID TEMPLATE */
  grid-template-areas:
  'header header header header'
  'main main main side'
  'footer footer footer footer';
}

/* (B) ASSIGN THE AREAS */
.cell {
  padding: 10px;
}
.head {
  grid-area: header;
  background: #ffe5db;
}
.main {
  grid-area: main;
  background: #e3ffdb;
}
.side {
  grid-area: side;
  background: #dbf8ff;
}
.foot {
  grid-area: footer;
  background: #ebebeb;
}

Yep, we can “design” a grid template using grid-template-areas – You can name the area whatever you wish. Then simply “assign” the areas to which cell using grid-area.

THE HTML

5-template-area.html
<!DOCTYPE html>
<html>
  <head>
    <title>Basic Grid Template Area</title>
    <link rel="stylesheet" type="text/css" href="5-template-area.css">
  </head>
  <body>
    <div id="grid-layout">
      <div class="cell head">Header</div>
      <div class="cell main">Main</div>
      <div class="cell side">Side</div>
      <div class="cell foot">Footer</div>
    </div>
  </body>
</html>

This last part is self-explanatory.

 

 

SECTION C

USEFUL BITS & LINKS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

 

SUMMARY – ALL THE BASIC CSS GRID PROPERTIES

Property Description
display: grid The container will display as a grid.
grid-template-columns: auto | px | % Set the width of the grid columns.
grid-template-rows: auto | px | % Set the width of the grid rows.
grid-column-gap: px | % Spacing in-between the cells horizontally.
grid-row-gap: px | % Spacing in-between the cells vertically.
grid-gap: px | % Sets spacing in-between the cells horizontally and vertically.
grid-column-start: N and grid-column-end: N How many columns to span across.
grid-row-start: N and grid-row-end: N How many rows to span across.
grid-template-areas: 'AREA AREA AREA' Create a grid template with area names.
grid-area: AREA Assign this cell to this area in the template.

 

CHEAT SHEET

How to Create a Basic CSS Grid (Click to enlarge)

 

LINKS & REFERENCES

 

CLOSING

WHAT’S NEXT?

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

1 thought on “How to Create a Grid in HTML & CSS – A Beginner’s Guide”

Leave a Comment

Your email address will not be published. Required fields are marked *