CSS Grid: A Complete Guide

CSS Grid Layout is a unique two-dimensional grid system for CSS. You can use a grid to design significant page layouts or small UI components. It offers a layout system with rows and columns, making it easier to design web pages without using floats and positioning. This guide is created as a resource to help you better understand and learn Grid. You will know all features in greater detail in the rest of this guide.

1. What is a Grid?

A grid is a set of intersecting horizontal and vertical lines defining columns and rows. Elements are placed onto the grid within these column and row lines. A grid layout consists of a parent element, with one or more child elements. CSS grid layout has the following features:

2. The Grid Container

An HTML element becomes a grid container when its display property is set to grid or inline-grid. All direct children of the grid container automatically become grid items. The horizontal lines of grid items are called rows. The vertical lines of grid items are called columns. The spaces between columns or rows are called gaps.

In this example, there is a containing div with a class of wrapper, and inside are five child elements.

<div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
</div>

You can make this wrapper container a grid in the following way:

.wrapper {
    display: grid;
  }

3. Grid Tracks

You can define rows and columns on the grid with the grid-template columns and grid-template-rows properties. These define grid tracks. A grid track is a space between any two lines on the grid.

You can add to the earlier example by adding the grid-template-columns property, then defining the size of the column tracks.

You have now created a grid with three 200-pixel-wide column tracks. The child items are laid out on this grid one in each grid cell.

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

4. The Fr Unit

You can define tracks using any length unit. Grid also provides an additional length unit to help you create flexible grid tracks. The new fr unit represents a fraction of the available space in the grid container.

You can create three equal width tracks that grow and shrink according to the available space.

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

5. Mixing Flexible and Absolute Sizes

You can mix absolute-sized tracks with fr units. The first track is 500 pixels, so the fixed width is taken away from the available space. The remaining space is divided into three and assigned in proportion to the two flexible tracks.

.wrapper {
  display: grid;
  grid-template-columns: 500px 1fr 2fr;
}

6. Track Listings with Repeat() Notation

You can create large grids with many tracks using repeat() notation, to repeat all or a section of the track. For example the grid definition:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Can also be written as:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

You can use repeat notation for a part of the track listing. In this example, there is a grid with an initial 20-pixel track, then a repeating section of 6 1fr tracks, then a final 20-pixel track.

.wrapper {
  display: grid;
  grid-template-columns: 20px repeat(6, 1fr) 20px;
}

7. The Implicit and Explicit Grid

You can specifically define column tracks with the grid-template-columns property. Grid can create rows on its own as part of the implicit grid. The explicit grid consists of any rows and columns defined with grid-template-columns or grid-template-rows.

If you place something outside of the defined grid or more grid tracks are needed due to the amount of content, then the grid creates rows and columns in the implicit grid. These tracks are auto-sized by default.

8. Grid Cells

A grid cell is the smallest unit you can have on your CSS grid. A grid cell is like a table cell. Once a grid is defined as a parent, the child items will lay themselves out in one cell each of the defined grid.

9. Gutters

Gutters are created using the column-gap and row-gap properties, or the shorthand gap. In the below example, there is a 10-pixel gap between columns and a 1em gap between rows.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 10px;
  row-gap: 1em;
}

10. Sample Project: Multi-Column Layout

This project is a little blog created using a grid layout. You will use a CSS grid in a couple of different places on this layout. You will build three article previews and these are split into three columns. So, each one takes up a full column in width. A featured article will show on top of these columns. It will span on all columns in width. You will also use the nested grid to design this cool layout.

You will use the following two starter files to build this design.

/* Index.html */
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multi Column Blog Layout</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

</body>
</html>

/* Styles.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600;800&family=VT323&display=swap');

body {
  margin: 20px;
  font-family: "Poppins";
  background: #d1dedd;
}
ul, li {
  padding: 0;
  list-style-type: none;
}
h1,h2,h3 {
  color: #767f7e;
}
p {
  color: #828b8a;
}

You will create the main container holding four article elements. Each article contains an image and a div for both the heading and paragraph. This will build up the whole template, you need to design this blog layout.

<main class="grid-container">
    <article class="featured">
      <img src="img/1.png" alt="featured img">
      <div>
        <h2>Balloon Magic</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet atque sit molestias corporis quod quis velit at ea laborum? Quia repellendus nobis eveniet, eligendi obcaecati est odit molestias quisquam maxime voluptatem mollitia, explicabo atque tempore vitae optio? Asperiores, deserunt commodi?</p>
      </div>
    </article>
    <article>
      <img src="img/1.png" alt="article img">
      <div>
        <h3>Balloon Magic</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus nisi minus placeat hic animi eveniet consectetur voluptates aliquid, sunt accusamus!</p>
      </div>
    </article>
    <article>
      <img src="img/2.png" alt="article img">
      <div>
        <h3>Road to Freedom</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus nisi minus placeat hic animi eveniet consectetur voluptates aliquid, sunt accusamus!</p>
      </div>
    </article>
    <article>
      <img src="img/3.png" alt="article img">
      <div>
        <h3>The Clear Blue</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus nisi minus placeat hic animi eveniet consectetur voluptates aliquid, sunt accusamus!</p>
      </div>
    </article>
  </main>

Then, create a grid using the main grid container in the CSS file. First of all, design the header at the top of the page.

header {
  max-width: 1200px;
  margin: 40px auto;
  border-bottom: 1px solid #bbc7c7;
}

Then, move on to the grid container and display this container as a grid. Create three columns of equal width to display the bottom three articles. Also, apply grid gap between columns. Set max-width to 1200px along with horizontal and vertical margins.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 60px;
  max-width: 1200px;
  margin: 20px auto;
}

You need to assign each image a specific width to make it avoid the extra room in the assigned column.

article img, article.featured img {
  width: 100%;
  border: 4px solid #fff;
  border-radius: 8px;
}

Set the featured article on top of the other three articles to design the required layout.

article.featured {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  border-bottom: 1px solid #bbc7c7;
  padding-bottom: 40px;
}
article p, .article h3 {
  margin: 20px 10px;
}

You created the required layout for the desktop version. When you go to smaller screen sizes, it does not look perfect. You need to do some media queries at different screen widths.

/* responsive */
@media screen and (max-width: 980px) {
  article {
    grid-column: span 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }
}

@media screen and (max-width: 760px) {
  article, article.featured {
    display: block;
    margin: 0 20px;
  }
}

Finally, you are able to design blog layout for screens of all sizes.

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Multi-Column Blog Layout</title>
</head>
<body>
  <header>
    <h1>Globe Roamer</h1>
  </header>
  <main class="grid-container">
    <article class="featured">
      <img src="img/1.png" alt="featured img">
      <div>
        <h2>Balloon Magic</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet atque sit molestias corporis quod quis velit at ea laborum? Quia repellendus nobis eveniet, eligendi obcaecati est odit molestias quisquam maxime voluptatem mollitia, explicabo atque tempore vitae optio? Asperiores, deserunt commodi?</p>
      </div>
    </article>
    <article>
      <img src="img/1.png" alt="article img">
      <div>
        <h3>Balloon Magic</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus nisi minus placeat hic animi eveniet consectetur voluptates aliquid, sunt accusamus!</p>
      </div>
    </article>
    <article>
      <img src="img/2.png" alt="article img">
      <div>
        <h3>Road to Freedom</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus nisi minus placeat hic animi eveniet consectetur voluptates aliquid, sunt accusamus!</p>
      </div>
    </article>
    <article>
      <img src="img/3.png" alt="article img">
      <div>
        <h3>The Clear Blue</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus nisi minus placeat hic animi eveniet consectetur voluptates aliquid, sunt accusamus!</p>
      </div>
    </article>
  </main>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600;800&family=VT323&display=swap');

body {
  margin: 20px;
  font-family: "Poppins";
  background: #d1dedd;
}
ul, li {
  padding: 0;
  list-style-type: none;
}
h1,h2,h3 {
  color: #767f7e;
}
p {
  color: #828b8a;
}

header {
  max-width: 1200px;
  margin: 40px auto;
  border-bottom: 1px solid #bbc7c7;
}
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 60px;
  max-width: 1200px;
  margin: 20px auto;
}
article.featured {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  border-bottom: 1px solid #bbc7c7;
  padding-bottom: 40px;
}
article img, article.featured img {
  width: 100%;
  border: 4px solid #fff;
  border-radius: 8px;
}
article p, .article h3 {
  margin: 20px 10px;
}

/* responsive */
@media screen and (max-width: 980px) {
  article {
    grid-column: span 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }
}

@media screen and (max-width: 760px) {
  article, article.featured {
    display: block;
    margin: 0 20px;
  }
}