Grid is the new black

Revolutionising visual design on the web

Starter files

https://huijing.github.io/slides/grid-workshop/files/grid-workshop-files.zip

Firefox Nightly Text editor Pencil and paper

Rendering engines 101

CSS engines
Reads HTML and CSS files and turns them into pixels on the screen

Images and explanations by Lin Clark

Parsing files into objects
Parse the files into objects the browser can understand, including the DOM

Images and explanations by Lin Clark

Apply styles and values to elements
Figure out what the elements should look like

Images and explanations by Lin Clark

Create and layout boxes on screen
Figure out dimensions for each node and where it goes on the screen

Images and explanations by Lin Clark

Paint the boxes on the screen
Paint the different boxes

Images and explanations by Lin Clark

Composite and render layers as one image
Composite the different layers into one image and render on screen

Images and explanations by Lin Clark

Web layouts over the years

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

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.”

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

Naming grid lines

Item A

Item B

Item C

Item D

Item E

Item F

Naming grid areas

Item A

Item B

Item C

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

Properties on the grid item

Using grid-column and grid-row

🍏

🍊

🥥

🥑

🍇

🍌

Using grid-area

Item A

Item B

Item C

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

Examples / Demos

Simple responsive dashboard

Artist profile page

Responsive header (if time permits)

JSConf.Asia logo (if time permits)

Simple responsive dashboard

Artist profile page

Diagonal header

See the Pen The Critical Request header by Chen Hui Jing (@huijing) on CodePen.

JSConf.Asia 2017

Useful references

Thank you!

Websitehttps://www.chenhuijing.com

Twitter@hj_chen

Medium@hj_chen

Codepen@huijing