Let’s say we set up a basic web page layout that has 5 sections: Title, Header, Sidebar, Content, and Footer.  This can be easily laid out using Grid, where we have an overall container that has five child divs. For example:

See the Pen Grid row expand by Chris Nielsen (@Chris_Nielsen) on CodePen.0

 

The HTML looks like this:

Note that each div in the grid has already been given its own class name corresponding to its section of the page.

<div class="grid">
  <div class="title">title</div>
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="content">content</div>
  <div class="footer">footer</div>  
</div>

And I have already set up the basic grid, with 2 columns (see line 3 in the code). There are two columns, but 5 sections, so you can see that there are five distinct boxes in this grid. Here is the set up Grid:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 15px;
}

.grid div {
  color: white;
  font-family: Roboto;
  font-size: 18px;
  text-align: center;
  align-self: center;
  padding: 10px;
}

.grid div:nth-child(even){
  background-color: #2196F3;
}

.grid div:nth-child(odd){
  background-color: #90A4AE;
}

Note about the set up: I used “.grid div” to add styling to the divs that are part of the grid, and I used “.grid div:nth-child(even)” and “.grid div:nth-child(odd)” to color the boxes.

In this article I will detail four different ways we can make the child divs expand to cover two columns.

 

Method #1: grid-column-start and grid-column-end

Create a style for the title class and give it a grid-column-start of 1 and a grid-column-end of 3. The 1 means start at the very left edge of the grid, and the 3 means the very right edge of the grid (because the grid only has two columns).

.title {
  grid-column-start: 1;
  grid-column-end: 3;
}

See the Pen Grid row expand – 1 by Chris Nielsen (@Chris_Nielsen) on CodePen.0

 

Method #2: grid-column: 1 / 3;

For this second method, I am going to create a style for the footer class so that it also expands to cover both columns.

.footer {
  grid-column: 1 / 3;
}

This method does the same thing as the first method, but with only 1 line of code.

See the Pen Grid row expand – 2 by Chris Nielsen (@Chris_Nielsen) on CodePen.0

 

Method #3: grid-column-end: span 2;

For this third method, I am going to create a style for the header class so that it also expands to cover both columns. This method uses “grid-column-end again, but just sets a span of 2 columns:

.header {
  grid-column-end: span 2;
}

See the Pen Grid row expand – 3 by Chris Nielsen (@Chris_Nielsen) on CodePen.0

 

Method #4: grid-area & grid-template-areas

This fourth method takes advantage of the class names that were assigned to each child element of the grid. For this method, I will undo the code used in the previous methods and create a CSS section for each of the child classes and define their grid areas. For example:

.title {
  grid-area: title;
}

.footer {
  grid-area: footer;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

Notice that each of these grid areas are defined without quotes.

Then in the grid section of the CSS, I will add a new line called “grid-template-areas” where I use the area names to define the layout of the grid. For example:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 15px;
  grid-template-areas: 
    "title title"
    "header header"
    "content sidebar"
    "footer footer"
 }

See the Pen Grid row expand – 4 by Chris Nielsen (@Chris_Nielsen) on CodePen.0

 

This is perhaps the most powerful method of the four. Basically, after the colon, you can use a new line and within double quotes that represent each row, you can set the area names that you want to appear, as you would like to lay them out.

Notice that I changed the order of the content and sidebar sections from how they are laid out in the HTML simply by specifying “content” before “sidebar” in the third row. This is very powerful because I could use this to totally rearrange a page simply by reordering the areas in the double quotes. For example, footer could be moved to the top and header to the bottom this way.

 

For more about CSS Grids, see:
https://www.w3schools.com/cssref/pr_grid.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout