Why CSS Grid is a game-changer for web design

Web layouts over the years

When the web started, there was no way to do layout at all, because all browsers could do was display text, or maybe some images, if you were lucky. But as more users got online, people started to find new ways to utilise the web and design for it. So properties that were never meant to be used for layout, like HTML tables or floats, were the next best hack we could think of.

Eventually, this got really painful and people started relying on frameworks to do the heavy lifting, especially when it comes to the layout side of things. In fact, I've inherited a lot of legacy projects that include the entire Boostrap library but only use its grid system.

This is an overview of how web layouts have evolved over the years. CSS grid gives us a level of control over how elements are rendered on a page that we’ve never had before. And that’s the biggest reason why it is revolutionary.

Grid versus Flexbox?

Wrong question

Grid AND Flexbox

Flexbox ➡ single dimension

What is CSS grid?

Defines a two-dimensional grid-based layout system, optimized for user interface design.

Basic terminology

There are a number of terms I will be using throughout this talk, so let’s make sure everyone is on the same page. Grid lines are the horizontal and vertical lines that form the basis of the grid structure, and can be referred to by their numerical index, which starts from 1.

Each space between grid lines are known as grid tracks, which make up the rows and columns of the grid, and represent the spaces your items appear in.

The grid cell is a single unit of the grid and is made up of 2 adjacent row lines and 2 adjacent column lines. By default, each grid item takes up 1 grid cell. A grid area is made up of multiple grid cells.

The best part about Grid, in my opinion, is the ability to define grid gaps, which are the gutters between grid tracks. If you have tried to create grids with gutters using any other method, you'll know how tedious it can be. If you haven't, well, trust me when I say it can be a tedious endeavour.

Flexbox and Grid

Based on the container-child relationship

“Grid works from the container in, other layout methods start with the item”
—Rachel Andrew

Layout technique: `inline-block`

Item A

Item B

Item C

Item D

Item E

Item F

The setup here is 6 items we want to place into a 3-column grid. One approach for creating such a layout is by using the inline-block technique. For a three column grid, we set the display of the items to inline-block and give them all a width of a third of the container.

Layout technique: `float`

Item A

Item B

Item C

Item D

Item E

Item F

It's almost the same if you use float, because you also need to set a width on each item.

Layout technique: `flex`

Item A

Item B

Item C

Item D

Item E

Item F

“Grid is the only layout technique that establishes a relationship between rows and columns of grid items.”

CSS grid basics

Define your grid.

Place items in the grid.

Properties on the Grid container

Defining a grid

<div class="grid1">
  <div class="grid1__item">
    <p>Item A</p>
  </div>
  <div class="grid1__item">
    <p>Item B</p>
  </div>
  <div class="grid1__item">
    <p>Item C</p>
  </div>
  <div class="grid1__item">
    <p>Item D</p>
  </div>
  <div class="grid1__item">
    <p>Item E</p>
  </div>
  <div class="grid1__item">
    <p>Item F</p>
  </div>
</div>

Item A

Item B

Item C

Item D

Item E

Item F

“Cede control of your designs to the browsers that render them.”

The `fr` unit

Represents a fraction of the free space in the grid container.

Item A

Item B

Item C

Fluid CSS grid

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

Here, I'm telling the browser I want 3 sets of 2 columns in the ratio of 3 to 2. By using the fr unit, all the available space is divided up accordingly. The grid then grows and shrinks together with viewport as it has been told to occupy all the free space available in the container.

The `minmax()` function

Defines a size range for columns or rows in the grid.

Item A

Item B

Item C

One of the new functions CSS grid gives us is the minmax() function. And it allows us to do something we never could before, which is the define a range of values. Now I can tell the browser that I want my grid columns or rows to be between a value of x and y, and the browser can figure out exactly what that value should be.

The `repeat()` function

To specify a large number of columns or rows that follow a similar pattern

Item

Also, if your design calls for a rather complex and large grid, you probably don't want to type out each track's width by hand. The repeat() function let's us repeat patterns of track sizes so we won't end up with ridiculously long lines of column or row sizes.

`auto-fill` vs. `auto-fit`

Allow browser to determine how many tracks to create depending on track size.

repeat(auto-fill, 100px);

repeat(auto-fit, 100px);

auto-fit collapses empty tracks.

`auto-fill` versus `auto-fit`

Responsive grid without media queries

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
}

Aligning your grid items

Warning: Impending confusion

Property	Axis	Aligns	Applies to
`justify-content`	main/inline	content within element (effectively adjusts padding)	block containers, flex containers and grid containers
`align-content`	cross/block	content within element (effectively adjusts padding)	block containers, flex containers and grid containers
`justify-self`	inline	element within parent (effectively adjusts margins)	block-level boxes, absolutely-positioned boxes and grid items
`align-self`	cross/block	element within parent (effectively adjusts margins)	absolutely-positioned boxes, flex items and grid items
`justify-items`	inline	items inside box (controls child items)	block containers and grid containers
`align-items`	cross/block	items inside box (controls child items)	flex-containers and grid-containers

Source: CSS Box Alignment Module Level 3

`justify/align-content`

content-distribution properties

Values	`justify-content`	`align-content`
`center`
`start`
`end`
`space-around`
`space-between`
`space-evenly`

`justify/align-self`

self-alignment properties

`justify/align-items`

defaults for justify/align-self

Malerei, Fotografie, Film (pg. 126) — Original print version

Recreated with CSS grid — CSS grid web version

Self-alignment properties, maybe?

Flexbox to the rescue

Display flex on grid items — That's more like it

But if instead we apply display: flex on the grid item, we can now use flex alignment properties applied on the flex container to position the grid item's content accordingly.

Properties on the grid item

Grid placement with grid lines / named lines

grid-template-columns: [first sidebar-start] 250px [sidebar-end content-start] 1fr [content-end last];
grid-template-rows: [first header-start] 100px [header-end content-start] 1fr [content-end footer-start] 100px [footer-end last];

Using `grid-column` and `grid-row`

(1) 🍏

(2) 🍊

(3) 🥥

(4) 🥑

(5) 🍇

(6) 🍌

Grid placement with named areas

.grid-container {
  display: grid;
  grid-template-areas: "logo stats"
                       "score stats"
                       "board board"
                       "... controls";
}

.logo { grid-area: logo; }
.score { grid-area: score; }
.stats { grid-area: stats; }
.board { grid-area: board; }
.controls { grid-area: controls; }

Using grid areas

Item A

Item B

Item C

Vertical whitespace

.steuergerät {
  grid-gap: 0.5em;
  grid-template-columns: 50% 50%;
  grid-template-areas: "title title"
                       "text text"
                       "key key"
                       "detail1 detail2"
                       "detail3 detail4";
}

@media screen and (min-aspect-ratio: 1/1) and (min-height: 22em) {
  .steuergerät {
    grid-template-columns: 18.75em 1fr 1fr 1fr;
    grid-template-rows: calc((100vh - 3em) / 3) calc((100vh - 3em) / 3) calc((100vh - 3em) / 3);
    grid-template-areas: "title detail1 key key"
                         "text detail2 key key"
                         "text detail3 detail4 braun";
  }
}

@media screen and (min-aspect-ratio: 8/5) and (min-height: 36em) {
  .steuergerät {
    grid-template-columns: 17.5em 1fr 3fr 1fr 1fr;
    grid-template-rows: calc((100vh - 3em) / 3) calc((100vh - 3em) / 3) calc((100vh - 3em) / 3);
    grid-template-areas: "title . key . ."
                         "text detail1 key detail2 detail3"
                         "text . . detail4 .";
  }
}

This is the final end result, and you can see how the layout changes with the viewport.

I'm going to make the assumption that most people have used media queries in some capacity before. The most common media queries are width-based. Occasionally, you may see a height-based media query or 2. Has anyone used the aspect-ratio media query before?

In the current specification, there are 13 media features that can be used as conditionals, including things like orientation, colour, resolution and so on. The design I'm showing in this demo is a good use case for the aspect-ratio media query.

Aspect-ratio media queries come in handy when relative proportions are important for your layout. And we can always combine multiple media queries to cater for different environments.

Overlap

Building a grid layout

Design credit: Drew Sullivan

Planning the grid — Good ol' pencil and paper

“Websites do NOT have to look the same in every browser.”

Fallback for browsers without grid — Fallback layout

main {
  max-width: 45em;
  margin: 0 auto;
  position: relative;
  padding: 1em;
}

_:-ms-input-placeholder, :root main {
  display: block;
}

h1 {
  margin-bottom: 0.25em;
}

h2 {
  margin-bottom: 1em;
}

.about {
  margin-bottom: 1em;
}

a {
  margin-bottom: 2em;
}

button {
  padding: 1em 2em;
  position: absolute;
  right: 1em;
  bottom: 1em;
}

I did not just put that slide in as a time marker, folks. The point I was trying to make is that rather than spending extra effort wrangling every pixel into place, why not embrace the dynamism of the web? The best part about the web medium is its ability to layer on additional functionality depending on the browser on which your page is being rendered.

I genuinely believe that web pages don't need to look exactly the same across every browser or device but I do believe no layout should be broken. So the base layout should utilise properties that have almost full support. In this case, I'm really just letting everything stack on top of each other, with some minor positioning at the bottom.

Browsers that do not support grid will get this layout instead.

@supports (display:grid) {
  @media (min-width: 42em) and (min-height: 27em) {
    main {
      max-width: none;
      padding: 0;
      display: grid;
      grid-template-columns: 2fr minmax(10em, max-content) minmax(14em, max-content) minmax(1em, 1fr) fit-content(28em) calc(2em + 0.5vw);
      grid-template-rows: 35vh 40vh 15vh 10vh;
    }

    h1 {
      grid-column: 3 / 6;
      grid-row: 1 / 2;
      z-index: 2;
      padding-left: 0.25em;
      margin-bottom: initial;
    }

    h2 {
      grid-row: 1 / -1;
      grid-column: 6 / 7;
      writing-mode: vertical-rl;
      margin-bottom: initial;
      color: $text;
    }

    hr {
      grid-column: 5 / 6;
      grid-row: 2;
      height: 6px;
      background-color: $text;
      width: 20ch;
    }

    .about {
      grid-column: 5 / 6;
      grid-row: 2;
      align-self: end;
      padding-bottom: 4vh;
      margin-bottom: initial;
    }

    a {
      grid-column: 5 / 6;
      justify-self: end;
      align-self: center;
      margin-bottom: initial;

      &::before {
        content: '';
        display: block;
        height: 4px;
        background-color: $accent;
        width: 4ch;
        margin-bottom: 1em;
      }
    }

    img {
      grid-column: 1 / 4;
      grid-row: 1 / 4;
    }

    .location {
      grid-column: 3 / 4;
      grid-row: 3 / 4;
      z-index: 2;
      background: $main;
      text-align: center;
      display: flex;

      p {
        margin: auto;
      }
    }

    button {
      grid-column: 2 / 3;
      grid-row: 4 / 5;
      position: initial;
      padding: 0;
    }
  }

  @media (min-width: 48em) {
    hr {
      opacity: 1;
    }
  }
}

Fallback with feature queries

A conditional group rule whose condition tests whether the user agent supports CSS property: value pairs.

My grid code was wrapped within an additional query with the syntax @supports, otherwise known as feature queries. And they are defined as such, conditionals that test if the browser supports a particular CSS feature.

Anatomy of a feature query

.selector {
  /* Styles that are supported in old browsers */
}

@supports (property:value) {
  .selector {
    /* Styles for browsers that support the specified property */
  }
}

And this is how a feature query looks like. The conditional checks if the browser supports a particular property or not. If it doesn't, the entire block within the @supports rule is ignored.

This means we start off with the basic layout that works everywhere. It could be a flexbox-based layout, or even single column, maybe largely browser default UI elements, that sort of thing. Then we layer on styles based on the features we want to use. Like what we saw in the previous example.

By organising our code in this manner, the browsers that do not support feature queries or the specified property still get styled, while those that do get a different look. We're making use of the ‘C’ in CSS. Call it ‘Cascading Web Design’. If this concept ever takes off, remember you heard it here first.

Browser support for `@supports`

main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .title {
    width: 100%;
  }

  .card {
    flex: auto;
    min-width: 12em;
    height: 12em;
  }

@supports (display:grid) {
    main {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
      grid-auto-rows: 8em;
    }

    .title {
      width: initial;
    }

    .card {
      min-width: initial;
      height: initial;
    }

    @media screen and (max-width: 383px) {
      main {
        grid-template-rows: 3em repeat(auto-fill, 8em);
      }
    }

    @media screen and (min-aspect-ratio: 1/1) {
      main {
        grid-template-columns: repeat(4, minmax(25vw, 5em));
        grid-template-rows: repeat(3, calc(100vh / 3));
        grid-template-areas: "a b c ."
                             "d e . f"
                             "g . h i";
      }
    }
  }

“CSS isn't a programming language. It's a stylesheet language. We shouldn't expect it to behave like a programming language. It has its own unique landscape and structures, ones that people with programming language mental maps might not expect.”
—Danielle Huntrods

Demos and examples

Useful references

Thank you!

https://www.chenhuijing.com

@hj_chen

@huijing

Font used is Faune, Alice Savoie / Cnap

Why CSS Grid is a game-changer for web design

Web layouts over the years

Grid versus Flexbox?

Wrong question

Grid AND Flexbox

Flexbox ➡ single dimension

What is CSS grid?

Basic terminology

Flexbox and Grid

Layout technique: inline-block

Layout technique: float

Layout technique: flex

CSS grid basics

Properties on the Grid container

Defining a grid

The fr unit

Fluid CSS grid

The minmax() function

The repeat() function

auto-fill vs. auto-fit

auto-fill versus auto-fit

Responsive grid without media queries

Aligning your grid items

Warning: Impending confusion

justify/align-content

justify/align-self

justify/align-items

Properties on the grid item

Grid placement with grid lines / named lines

Using grid-column and grid-row

Grid placement with named areas

Using grid areas

Vertical whitespace

Overlap

Building a grid layout

Fallback with feature queries

Anatomy of a feature query

Browser support for @supports

Demos and examples

Useful references

Thank you!

Layout technique: `inline-block`

Layout technique: `float`

Layout technique: `flex`

The `fr` unit

The `minmax()` function

The `repeat()` function

`auto-fill` vs. `auto-fit`

`auto-fill` versus `auto-fit`

`justify/align-content`

`justify/align-self`

`justify/align-items`

Using `grid-column` and `grid-row`

Browser support for `@supports`