2017: the year of CSS Grid

Revolutionising visual design on the web

Slides link QR code
🇲🇾 🏀 👩‍💻 🇸🇬 📝 🎙
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

CSS Grid arrives

“Our ‘Age of Anxiety’ is, in great part, the result of trying to do today's job with yesterday's tools—with yesterday's concepts.”
—Marshall McLuhan

Grid browser support

CSS1Recommendation: 17 Dec 1996CSS2Recommendation: 12 May 1998CSS3Decision to modularise: 14 Apr 2000 (26 modules)CSS2.1Recommendation: 7 Jun 2011CSS2.2Working draft: 12 Apr 2016Completed CSS Snapshot 2017 CSS Snapshot 2015 CSS Snapshot 2010 CSS Snapshot 2007 CSS Color Level 3 CSS Namespaces Selectors Level 3 CSS Level 2 Revision 1 CSS Level 1 CSS Print Profile Media Queries CSS Style AttributesTesting CSS Image Values and Replaced Content Level 3 CSS Speech CSS Flexible Box Layout Level 1 CSS Text Decoration Level 3 CSS Shapes Level 1 CSS Masking Level 1 CSS Fragmentation Level 3 CSS Cascading Variables Compositing and Blending Level 1 CSS Syntax Level 3 CSS Grid Layout Level 1 CSS Basic User Interface Level 3 CSS Will Change Level 1 Media Queries Level 4 Geometry Interfaces Level 1 CSS Cascading and Inheritance Level 4 CSS Scroll Snap Level 1 CSS Containment Level 1Refining CSS Animations Web Animations 1.0 CSS Text Level 3 CSS Transforms CSS Transitions CSS Box Alignment Level 3 CSS Display Level 3 Preview of CSS Level 2 CSS Timing Functions Level 1Exploring CSS Backgrounds and Borders Level 4 CSS Device Adaptation CSS Exclusions Filter Effects CSS Generated Content for Paged Media CSS Page Floats CSS Template Layout CSS Line Grid CSS Lists Level 3 CSS Positioned Layout Level 3 CSS Regions CSS Table Level 3 CSS Object Model CSS Font Loading CSS Scoping Level 1 Non-element SelectorsCSS Inline Layout Level 3 Motion Path Level 1 CSS Round Display Level 1 CSS Basic User Interface Level 4 CSS Text Level 4 CSS Painting API Level 1 CSS Properties and Values API Level 1 CSS Typed OM Level 1 Worklets Level 1 CSS Color Level 4 CSS Fonts Level 4 CSS Rhythmic Sizing Level 1 CSS Image Values and Replaced Content Level 4 CSS Fill and Stroke Level 3 CSS Logical Properties and Values Level 1 CSS Overflow Level 4Stable CSS Backgrounds and Borders Level 3 CSS Conditional Rules Level 3 CSS Multi-column Layout Level 1 CSS Values and Units Level 3 CSS Cascading and Inheritance Level 3 CSS Fonts Level 3 CSS Writing Modes Level 3 CSS Counter Styles Level 3Rewriting CSS Basic Box Model Level 3 CSS Generated Content Level 3CSS Snapshot 2017(88 modules)Evolution of CSS Specifications

Team Layout

And more...

Team Layout

CSS properties

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.

“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

Defining the Grid

Parent-child relationship
body {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 20em 1fr 20em;
}

The grid formatting context only applies to child elements

Explicit Grid and Implicit Grid

Implicit grid
.grid-container {
  display: grid;
  grid-template-columns: 150px 150px 150px; /* three columns  */
  grid-template-rows: 150px 150px; /* two rows  */
}

.item {
  grid-column: 5 / 6; /* grid-column-start: 5; grid-column-end: 6;  */
  grid-row:  2 / 3; /* grid-row-start: 2; grid-row-end: 3;  */
}

The browser will create an implicit grid to hold items placed outside the grid.

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

The repeat() function

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

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

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.

A

B

C

D

E

F

Fixed CSS grid

.container {
  display: grid;
  grid-template-columns: repeat(5, 10em);
}

The fr unit

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

Fluid CSS grid

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

The minmax() function

Defines a size range greater than or equal to min and less than or equal to max.

Responsive CSS grid

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

Basic terminology

Grid terminology

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; }

Aligning your grid items

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

Vertical whitespace

grid-row and grid-column

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

Item A

Item B

Item C

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

.container {
  display: grid;
  grid-template-columns: repeat(9, 1.25em);
  grid-template-rows: repeat(6, 1.25em);
}

h2 {
  grid-row: 3 / 5;
  grid-column: 1 / 10;
}

.container::before {
  grid-row: 1 / 7;
  grid-column: 1 / 7;
}

.container::after {
  grid-row: 1 / 7;
  grid-column: 4 / 10;
}

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.

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";
      }
    }
  }

Browser support for @supports

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

@supports (property:value) {
  .selector {
    /* Styles for browsers that support the specified property */
  }
}
Wismut Labs site layout on IE11 Wismut Labs site layout on Firefox Wismut Labs site layout on Chrome
https://www.wismutlabs.com
“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

Shape the web we use and build for

Demos and examples

Useful resources

https://2018.jsconf.asia/

Discount code: PENANGJS

Thank you!

Websitehttps://www.chenhuijing.com

Twitter@hj_chen

Medium@hj_chen

Codepen@huijing