Layout the web with CSS grid

(and friends)

↑

General agenda

• Introduction and set up
• Pre-grid techniques and concepts
• Flexbox basics
• Real-world application: Image gallery (part 1)
• Real-world application: Configuration page
• Grid basics
  • Defining a grid
  • Auto-placement
  • Flexible sizing
  • Manual placement
• Real-world application: Image gallery (part 2)
• Real-world application: Responsive dashboard
• Feature queries
• Real-world application: Artist profile page

Evolution of browsers

Pre-grid techniques

See the Pen #0: Pre-Grid layout techniques by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/KGOmLZ/

Flexbox basics

See the Pen Flexbox basics by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/NEPwoj/

Image gallery

See the Pen Image gallery by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/dQPZmL/

Configuration page

See the Pen Configuration page by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/GwgMJx/

Defining a grid

See the Pen #1: Defining a grid by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/mzKoNj/

The repeat() function

See the Pen #2.1: The repeat() function by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/XxveJe/

auto-fill versus auto-fit

See the Pen #2.2: auto-fill versus auto-fit by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/GYVyMX/

grid-auto-row and grid-auto-column

See the Pen #2.3: grid-auto-row and grid-auto-column by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/ePqyMz/

The grid-auto-flow property

See the Pen #2.4: The grid-auto-flow property by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/LgwegQ/

The fr unit

See the Pen #3.1: The fr unit by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/WaVdLN/

The minmax() function

See the Pen #3.2: The minmax() function by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/jegYob/

Content-based sizing

See the Pen #3.3: Content-based sizing by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/bmXLpd/

Image gallery (part 2)

See the Pen Image gallery by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/dQPZmL/

Line-based placement

See the Pen #4.1: Line-based placement by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/pxMaYp/

grid-column and grid-row

See the Pen #4.2: grid-column and grid-row by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/zmgRgM/

The span keyword

See the Pen #4.3: The span keyword by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/NOQYMM/

Using the grid-area shorthand

See the Pen #4.4: Using the grid-area shorthand by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/vVoRzx/

Naming grid lines

See the Pen #5.1: Naming grid lines by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/xyvWBZ/

Naming grid areas

See the Pen #5.2: Naming grid areas by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/EdqLxP/

Responsive dashboard

See the Pen Responsive dashboard by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/xQbXKO/

Feature queries

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

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

Musician profile page

See the Pen Musician profile page by Chen Hui Jing (@huijing) on CodePen.

https://codepen.io/huijing/pen/bQNoeO/

Useful references

• CSS Grid Layout Module Level 1
• Codrops CSS Grid reference
• Grid by Example
• Learn CSS Grid
• Grid Auto-Placement Is Ready
• Automatizing the Grid
• Deep Dive into Grid Layout Placement
• CSS Grid Layout and positioned items
• CSS Logical Properties and Values in Chromium and WebKit
• Changes on CSS Grid Layout in percentages and indefinite height
• The Story of CSS Grid, from Its Creators
• CSS Grid Layout is Here to Stay
• The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment
• What Happens When You Create A Flexbox Flex Container?
• Everything You Need To Know About Alignment In Flexbox
• Use Cases For Flexbox
• Grid “fallbacks” and overrides

Thank you!

https://www.chenhuijing.com

@hj_chen

@hj_chen

@huijing

Font used is Mission Gothic, by James T. Edmondson and Trevor Baum