Ultimate Guide to CSS Grid Layout (Part 1)

1. Grid Container
2. Grid Columns
3. Grid Rows
4. Grid Gaps

CSS Grid Layout is a powerful tool that allows for two-dimensional layouts to be created on the web.

Grids similar to tables enable developers to align elements into various columns and rows. But, the main difference is, opposing to tables,  many more layouts are either possible or easier with CSS grid.  For example, a grid container’s child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.

A grid layout consists of a parent element, with one or more child elements.

HTML example

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

Grid Container

You can create a grid container by setting the display property with a value of grid or inline-grid.

All direct children of grid containers become grid items.

.grid-container {
  display: grid;
}

/* or */

.grid-container {
  display: inline-grid;
}

Grid Columns

To see something that looks more grid-like, we’ll need to define some columns to the grid. You can use any length unit or percentage to create these column tracks.

Let’s define three equal columns 200px width.

 .grid-container { 
   display: grid;
   grid-template-columns: 200px 200px 200px; /* three columns width 200px */
} 
 

Let’s try different columns widths.

 .grid-container { 
   display: grid;
   grid-template-columns: 90px 150px 250px;  /* different columns widths */
} 
 

Let’s try to make flexible grid.

In addition to creating grids using lengths and percentages, we can use the fr unit to flexibly size grid rows and columns. This unit represents one fraction of the available space in the grid container.

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

Grid Rows

A grid row is a horizontal track in a CSS Grid Layout, that is the space between two horizontal grid lines. It is defined by the grid-template-rows property or in the shorthand grid or grid-template properties.

Let’s define two example rows.

 .grid-container { 
   display: grid;
   grid-template-rows: 50px 100px; /* we've defined first two rows height */
} 
 

The same as with grid columns we can use a different units.

  grid-template-rows: auto;

  grid-template-rows: 40px 4em 40px;

  grid-template-rows: 1fr 2fr 1fr;

  grid-template-rows: 3ch auto minmax(10px, 60px);
 

Grid Gaps (Gutters)

The grid-column-gap and grid-row-gap properties create gutters between columns and rows

Let’s use our first example but this time we’ll add gaps between columns.

 .grid-container { 
   display: grid;
   grid-template-columns: 200px 200px 200px; /* three columns width 200px */
   grid-column-gap: 10px;
} 
 

Now we do the same with gaps between rows. So simple!

 .grid-container { 
   display: grid;
   grid-template-columns: 200px 200px 200px; /* three columns width 200px */
   grid-column-gap: 10px;
   grid-row-gap: 10px;
}