Varun Vachhar

A24 ·

Learning CSS Grid – Part 2 

+-------------------------+ +---+
|                         | |   |
|  CSS Grid               | |   |
|  Layout Module          | |   |
|                         | |   |
+-------------------------+ |   |
+----+ +------------------+ |   |
|    | |                  | |   |
|    | |                  | |   |
|    | +------------------+ +---+
|    | +------+ +---------------+
|    | |      | |        part 2 |
+----+ +------+ +---------------+

In part one I introduced the CSS Grid Layout Module. We covered some basic terminology and talked about how to create layouts by placing items onto a grid-area.

Let’s start with quick refresher. Grid Area is the space created by the intersection of four grid lines. We define it in terms of start and end points for columns and rows.

                                +-- grid-column-start
                                |
             +-- grid-column +--+
             |                  |
             |                  +-- grid-column-end
grid-area +--+
             |                  +-- grid-row-start
             |                  |
             +-- grid-row +-----+
                                |
                                +-- grid-row-end

Grid area is made up of a grid column and a grid row. Grid column and row both require a start and an end point.

In this post I am going to introduce another approach to creating grid based layouts – using grid template areas.

Grid Template Areas

This property allows us to divide the grid into named areas which can then be referenced for placing items. We start by declaring the names in the grid-template-areas property. Once declared we can use them as keywords in any of the grid-placement properties.

We are still defining grid areas however instead of providing row/column start & end points we are doing it through a layout template.

.my-grid {
display: grid;
grid-template-areas: "header   header   header"
                     "content  content    side"
                     "footer   footer   footer";
}
Named Areas


+-----------------------+
|░░░░░░░░░░░░░░░░░░░░░░░|
|░░░░░░░ Header ░░░░░░░░|
|░░░░░░░░░░░░░░░░░░░░░░░|
+---------------+-------+
|▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓|░░░░░░░|
|▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓|░░░A░░░|
|▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓|░░░s░░░|
|▓▓▓ Content ▓▓▓|░░░i░░░|
|▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓|░░░d░░░|
|▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓|░░░e░░░|
|▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓|░░░░░░░|
+---------------+-------+
|░░░░░░░░░░░░░░░░░░░░░░░|
|░░░░░░░ Footer ░░░░░░░░|
|░░░░░░░░░░░░░░░░░░░░░░░|
+-----------------------+

We can define named grid areas to place content into.

You’ll notice that the syntax of the grid-template-areas property provides a visualization of the grid structure. This makes it relatively easy to understand the layout. To place items onto this grid we can use grid-area property. For example: grid-area: header; or grid-area: content;, etc.

.my-grid {
  display: grid;
  grid-template-areas: "header    header"
                       "content     side"
                       "footer    footer";
}

.a--header { grid-area: header; }
.a--content { grid-area: content; }
.a--side { grid-area: side; }
.a--footer { grid-area: footer; }

The grid-template-areas property allows us to define the shape of the layout, but not the sizing. By default the sizing is dependant on grid items placed within them. You can pair grid-template-areas with other properties such as grid-template-rows & grid-template-columns to control the sizing of the areas too!

.my-grid {
  display: grid;
  grid-template-areas: "header    header"
                       "content     side"
                       "footer    footer";

  grid-template-rows: 4rem 1fr 4rem;
  grid-template-columns: 1fr 33.33%;
}

.a--header { grid-area: header; }
.a--content { grid-area: content; }
.a--side { grid-area: side; }
.a--footer { grid-area: footer; }

Example 1 – Magazine Style Layout

The above is a magazine style layout of Hawaii’s Online Gaming Curse article from The Outline – built using both CSS Grid and multi-column layout. Below is a schematic of what the layout looks like at the three break points.

Large-Breakpoint
  min-width: 60em



+----+ +------------------+ +-----------+
|meta| | title            | | copy2     |
|    | |                  | |           |
+----+ +------------------+ +-----------+
+-------------------------+ +-----------+
| copy1                   | | copy2     |
|                         | |           |
+-------------------------+ +-----------+
+-------------------------+ +-----------+
|  copy1                  | | copy2     |
|                         | |           |
+-------------------------+ +-----------+
+---------------------------------------+
| media                                 |
|                                       |
+---------------------------------------+
+-----------+ +-------------------------+
|  aside    | | copy3                   |
|           | |                         |
+-----------+ +-------------------------+
Medium-Breakpoint
  min-width: 30em
  and max-width: 60em


+-----+ +-------------------+
|meta | | title             |
|     | |                   |
+-----+ +-------------------+
+---------------------------+
| copy1                     |
|                           |
+---------------------------+
+---------------------------+
| copy2                     |
|                           |
+---------------------------+
+---------------------------+
| media                     |
|                           |
+---------------------------+
+---------------------------+
| aside                     |
|                           |
+---------------------------+
+---------------------------+
| copy3                     |
|                           |
+---------------------------+
Small-Breakpoint
  min-width: 60em



+---------------+
| title         |
|               |
+---------------+
+---------------+
| meta          |
|               |
+---------------+
+---------------+
| copy1         |
|               |
+---------------+
+---------------+
| copy2         |
|               |
+---------------+
+---------------+
| media         |
|               |
+---------------+
+---------------+
| aside         |
|               |
+---------------+
+---------------+
| copy3         |
|               |
+---------------+

The magazine style layout of Hawaii’s Online Gaming Curse – The Outline built using CSS Grid and multi-column layout.

Given this was one of the first grid layouts I ever built I made some assumptions which later turned out to be false. I defined the grid-template-areas for all three breakpoints using the same number of columns. While you can do this you don’t have to. You can completely modify the template by changing the values for the grid-template-areas, grid-template-columns and grid-template-rows. The other option you have is to change the area that an element is placed in. More on that in the next example.

Example 2 – BBC Sport Live Football

For this example I recreated the BBC Sport Live Reporting page. Below you can see the schematic for the large breakpoint layout on the right and its grid template representation on the left. And yes, you can use emoji for template area names!

grid-template-areas:
"✈️ ✈️ ✈️ ✈️ ✈️"
"⚽️ ⚽️ ⚽️ ⚽️ ⚽️"
"🖼 🖼 🖼 🖼 🖼"
".  👀 📻 📊  ."
".  👀 📻 🤼  .";

Where:
✈️: Navigation
⚽️: Match Score
🖼: Media
👀: Summary
📻: Live Reporting
📊: Stats
🤼: Line-ups
+-------------------------------------+
|              Navigation             |
+-------------------------------------+
|             Match Score             |
+-------------------------------------+
|                                     |
|               Media                 |
|                                     |
+--+------+-+-------------+-+------+--+
|  |  su  | |             | |      |  |
|  |  mm  | |             | |      |  |
|  |  ar  | |   Live      | | stats|  |
|  |  y   | |   Reporting | |      |  |
|  +------+ |             | +------+  |
|           |             | |      |  |
|           |             | | line |  |
|           |             | | -ups |  |
|           |             | |      |  |
|           |             | |      |  |
|           |             | |      |  |
+-------------------------------------+

BBC Sport Live Reporting page recreated with CSS Grid.

In the main content area there are three columns: summary (👀), live-reporting (📻) & stats/line-up (📊/🤼🏽‍). To centre this content I placed an unnamed spacer on either side. You can define unnamed areas using a sequence of one or more ..

At the medium break point live-reporting (📻), stats (📊) & line-up (🤼) get collapsed into a tab based interface (📋). We can do this by placing those items in the 📋 grid-area instead. And for the small breakpoint things collapse further.

grid-template-areas:
"✈️ ✈️ ✈️ ✈️"
"⚽️ ⚽️ ⚽️ ⚽️"
"🖼 🖼 🖼 🖼"
".  👀 📋  .";

Where:
✈️: Navigation
⚽️: Match Score
🖼: Media
👀: Summary
🗂: Tabs
📋: Tab-Content
+-------------------------------------+
|              Navigation             |
+-------------------------------------+
|             Match Score             |
+-------------------------------------+
|                                     |
|               Media                 |
|                                     |
+--+------+-+---+---+---+----------+--+
|  |  su  | |   |   |   |          |  |
|  |  mm  | +---+---+---+----------+  |
|  |  ar  | |                      |  |
|  |  y   | |                      |  |
|  +------+ |                      |  |
|           |                      |  |
|           |          Tabs!       |  |
|           |                      |  |
|           |                      |  |
|           |                      |  |
|           |                      |  |
+-------------------------------------+

BBC Sport Live Reporting page recreated with CSS Grid.

Each entry in the live-reporting (📻) section is also using a grid layout, but I’ll let you discover that by reading through the code.

Conclusion

One of the main takeaways for me from these experiments was that CSS Grid removes the need for wrapper elements to create layouts. This flattens the markup and the main blocks of content generally end up being direct descendants of the grid container i.e. grid-items. Or at least, we should aim to have them be grid items. This then allows us to drastically modify how the content will be displayed by moving items anywhere within the grid.

You can find all my CSS Grid experiments in this CodePen collection. Also, I would highly recommend reading the CSS Grid Spec. It has a lot of amazing examples, detailed explanation of all concepts and it is not as daunting as you would think.