Why CSS Grid is a game-changer for web design

GitHub Constellation
Writing CSS meme
CSS floats meme
CSS inheritence meme
Launch of the web Where the web was born

Web layouts over the years

No layout Table-based layout Float-based layout Panel-style from frameworks

Grid versus Flexbox?

Wrong question

Grid AND Flexbox

Flexbox ➡ single dimension

flex-direction: row
flex-direction: column

What is CSS grid?

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

Basic terminology

Grid terminology

Flexbox and Grid

Based on the container-child relationship

Flex/Grid containerFlex/Grid item
“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

Layout technique: float

Item A

Item B

Item C

Item D

Item E

Item F

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.

Define a grid

Place items in the 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);
}

The minmax() function

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

Item A

Item B

Item C

The repeat() function

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

Item

Item

Item

Item

Item

Item

Item

Item

auto-fill vs. auto-fit

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

Auto-fill
repeat(auto-fill, 100px);
Auto-fit
repeat(auto-fit, 100px);

auto-fit collapses empty tracks.

auto-fill versus auto-fit

A

B

C

D

E

F

Responsive grid without media queries

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

Aligning your grid items

Plane formation

Warning: Impending confusion

Property Axis Aligns Applies to
justify-content main/inline

content within element
(effectively adjusts padding)

Content diagram
block containers, flex containers and grid containers
align-content cross/block
justify-self inline

element within parent
(effectively adjusts margins)

Self diagram
block-level boxes, absolutely-positioned boxes and grid items
align-self cross/block absolutely-positioned boxes, flex items and grid items
justify-items inline

items inside box
(controls child items)

Items diagram
block containers and grid containers
align-items cross/block flex-containers and grid-containers

Source: CSS Box Alignment Module Level 3

justify/align-content

content-distribution properties

A
B
C
D
Values justify-content align-content
center justify-content:center align-content:center
start justify-content:start align-content:start
end justify-content:end align-content:end
space-around justify-content:space-around align-content:space-around
space-between justify-content:space-between align-content:space-between
space-evenly justify-content:space-evenly align-content:space-evenly

justify/align-self

self-alignment properties

A
B
C
D

justify/align-items

defaults for justify/align-self

A
B
C
D
Malerei, Fotografie, Film (pg. 126)
Original print version
Recreated with CSS grid
CSS grid web version

Self-alignment properties, maybe?

Self-alignment properties
These are not the borders you are looking for

Flexbox to the rescue

Display flex on grid items
That's more like it

Properties on the grid item

Chessboard

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];
Named lines

Using grid-column and grid-row

(1) 🍏

(2) 🍊

(3) 🥥

(4) 🥑

(5) 🍇

(6) 🍌

Grid placement with named areas

Named grid 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

Braun wide layout
Braun mid-width layout Braun narrow layout
.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 .";
  }
}

Overlap

Building a grid layout

Tycho artist blog/profile concept

Design credit: Drew Sullivan

Planning the grid
Good ol' pencil and paper
Markup only
Markup without any CSS
General styles
Basic styles
“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;
}
Grid layout styles
CSS grid in action
@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.

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 */
  }
}

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!

Websitehttps://www.chenhuijing.com

Twitter@hj_chen

Medium@hj_chen

Codepen@huijing

Font used is Faune, Alice Savoie / Cnap