CSS Grid Introduction

Required Grid Styles

Unlike with flexbox, you won't see an immediate change on your page just by telling a container to display: grid; because you have to give the browser more information than that to get it working. The parent container needs the display: grid; style set, and you also must define either the template rows or columns, so that the container knows how to place its children. That looks like this: grid-template-columns: 1fr 1fr 1fr; (for a container that you want to have three equal columns), or grid-template-rows: 1fr 1fr 1fr; (for a container that you want to have three equal rows). (Changing the gap between rows/columns and controlling justification and alignment are optional, but will depend on your desired look for that container).

For the children in a grid container, the most common style you'll need to add is one that tells one (or more) of the children in that container to span all or some of the columns and/or rows. Most often, you will need a heading to span all columns, and that can easily be set with one line of CSS inside of your child selector: grid-column: 1/-1;.

Styles for the Parent Container

You define the grid on your parent container, and the children will slot into place inside of the grid. Remember, you have to tell the container to display: grid; and then define columns and/or rows (most often you want columns, as grid isn't needed to make block-level elements display in a single column. Give it a try in your code sometime, if you only use block-level containers, it works).

                        
#parent-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

Styles for the Children in a Grid Container

The style you will need to add most often to a child is one that will tell one of the grid parent's children to span all of the columns you defined (think about a heading and paragraph that you want to be centered in the container, with the rows/columns of other content below it). Just remember to add grid-column: 1/-1; to the child selector in your CSS for the element you want to span all columns.

                        
#grid-child{
    grid-column: 1/-1;
}

Use Multiple Grids on the Same Page!

As you can see, there are a lot of grids on this page with different numbers of columns and rows. Because you add the grid styles to a parent container, any parent container on your page can hold content arranged in a grid, even if it's inside of another grid container! That is how the header is set up, so be sure to inspect that code to see how it works.

Basic Grid Layout Practice

We've seen how the grid works, and where to add our styles. Now let's use the examples below to practice creating grids on containers with children.

Two Columns

                        
<!-- HTML -->
<!-- DIVS ARE USED HERE AS AN 
  EXAMPLE ONLY, USE SEMANTIC
  CONTAINERS & ELEMENTS -->
<div id="grid-parent">
    <div>Child 1</div>
    <div>Child 2</div>
</div>

                        
/* CSS */	
#grid-parent{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

Three Columns

                        
<!-- HTML -->
<!-- DIVS ARE USED HERE AS AN 
  EXAMPLE ONLY, USE SEMANTIC
  CONTAINERS & ELEMENTS -->
<div id="grid-parent">
    <div>Child 1</div>
    <div>Child 2</div>
    <div>Child 3</div>
</div>

                        
/* CSS */	
#grid-parent{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

Four Columns

                        
<!-- HTML -->
<!-- DIVS ARE USED HERE AS AN 
  EXAMPLE ONLY, USE SEMANTIC
  CONTAINERS & ELEMENTS -->
<div id="grid-parent">
    <div>Child 1</div>
    <div>Child 2</div>
    <div>Child 3</div>
    <div>Child 4</div>
</div>

                        
/* CSS */	
#grid-parent{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
}

A Grid with a Column-Spanning Child

                        
<!-- HTML -->
<!-- DIVS ARE USED HERE AS AN 
  EXAMPLE ONLY, USE SEMANTIC
  CONTAINERS & ELEMENTS -->
<div id="grid-parent">
    <div id="grid-child-to-span-columns">span</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

                        
/* CSS */	
#grid-parent{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
}

#grid-child-to-span-columns{
    grid-column: 1/-1;
}

span

Another Grid with Column-Spanning Children

                        
<!-- HTML -->
<!-- DIVS ARE USED HERE AS AN 
  EXAMPLE ONLY, USE SEMANTIC
  CONTAINERS & ELEMENTS -->
<div id="grid-parent">
    <div class="grid-child-to-span-columns">span</div>
    <div>2</div>
    <div>3</div>
    <div class="grid-child-to-span-two-columns">4</div>
    <div class="grid-child-to-span-columns">span</div>
</div>

                        
/* CSS */	
#grid-parent{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
}

.grid-child-to-span-all-columns{
    grid-column: 1/-1;
}

.grid-child-to-span-two-columns{
    grid-column: span 2;
}

span

A Grid with a Row-Spanning Child

                        
<!-- HTML -->
<!-- DIVS ARE USED HERE AS AN 
  EXAMPLE ONLY, USE SEMANTIC
  CONTAINERS & ELEMENTS -->
<div id="grid-parent">
    <div id="grid-child-to-span-rows">span</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

                        
/* CSS */	
#grid-parent{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
}

#grid-child-to-span-rows{
    grid-column: 1/2;
    grid-row: 1/3;
}

span

Another Grid with Row-Spanning Children

                        
<!-- HTML -->
<!-- DIVS ARE USED HERE AS AN 
  EXAMPLE ONLY, USE SEMANTIC
  CONTAINERS & ELEMENTS -->
<div id="grid-parent">
    <div id="grid-child-to-span-rows-first-column">span</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div id="grid-child-to-span-rows-last-column">span</div>
</div>

                        
/* CSS */	
#grid-parent{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
}

#grid-child-to-span-rows-first-column{
    grid-row: 1/3;
}

#grid-child-to-span-rows-last-column{
    grid-column: 4/5;
    grid-row: 1/3;
}

span

More Grid Examples

Example 1

                        
<!-- HTML -->
<!-- DIVS ARE USED HERE AS AN 
  EXAMPLE ONLY, USE SEMANTIC
  CONTAINERS & ELEMENTS -->
<div id="grid-parent">
    <div id="child-1">child-1</div>
    <div id="child2">child-2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

                        
/* CSS */
#grid-parent{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
}

#child-1, #child-2{
    grid-column: 1/-1;
}

child-1

child-2

Example 2

                        
<!-- HTML -->
<!-- DIVS ARE USED HERE AS AN 
  EXAMPLE ONLY, USE SEMANTIC
  CONTAINERS & ELEMENTS -->
<div id="grid-parent">
    <div id="child-1">child-1</div>
    <div id="child-2">child-2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div id="child-7">child-7</div>
</div>

                        
#grid-parent{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
}

#child-1, #child-7{
    grid-column: 1/-1;
}

#child-2{
    grid-row: 2/4;
}

child-1

child-2

child-7