Do you Box Model?

Layout the web with CSS grid

and the rest of team layout

#TeamWeb

↑

Original image by the amazing Lin Clark
Philippine Airlines

This workshop has been inadvertently brought to you by Philippine Airlines.

Chen Hui Jing
Jing
@hj_chen
🇲🇾 🏀 👩‍💻 📝 🦊

Starter files

http://bit.ly/ffc9-layout

Do you Box Model?
Firefox Nightly Text editor Pencil and paper

Evolution of browsers

Evolution of browser layout capabilities

How browsers render stuff

(and lay them out)

Source document Box tree
Source document Box tree

Layout of boxes

  • Box dimensions and type
  • Positioning scheme (normal flow / float / absolute positioning)
  • Relationships between elements in the document tree
  • External information (e.g. viewport size, intrinsic dimensions of images etc.)

Positioning schemes

Normal flow
Normal flow
Floats
Floats
Absolute positioning
Absolute positioning

Basic terminology

Grid terminology

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

Firefox Grid Inspector

The most basic grid

Defining a grid

Using grid-template-rows and grid-template-columns

<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

Auto-placement of grid items

(and the implicit grid)

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

Letting the browser figure out the math

A

B

C

D

E

F

grid-auto-row and grid-auto-column

Controlling the size of implicit rows/columns

A

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

The grid-auto-flow property

Adjusting the direction and density of grid items

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

More ways to size grid rows and columns

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

Responsive grid without media queries

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

Content-based sizing

Using the min-content, max-content and fit-content properties

What's worse, lookin' jealous or crazy? Jealous or crazy?

Or like being walked all over lately, walked all over lately

I'd rather be crazy

Simple responsive grid

Manual placement of grid items

(and the explicit grid)

Line-based placement

Using grid-row-start, grid-row-end and grid-column-start, grid-column-end

Beyoncé at ‘Tidal X 10/15’ concert red carpet in Brooklyn, 2016

Some Grid shorthands

(because brevity is a virtue…maybe)

¯\_(ツ)_/¯

Using the grid-row and grid-column shorthands

By default, grid items will take up the space of 1 grid cell

🍏

🍊

🥥

🥑

🍇

🍌

The span keyword

Content can span multiple grid cells

Beyoncé's gravity-defying performance at the Grammys, 2017

Using the grid-area shorthand

grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>
Beyoncé for Vogue, Sep 2018

Assigning names to grid things

Naming grid lines

Item A

Item B

Item C

Item D

Item E

Item F

Naming grid areas

Using grid-template-areas and grid-area

Item A

Item B

Item C

Making sense of box alignment

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
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
Text align icons

justify/align-self

self-alignment properties

A
B
C
D

justify/align-items

defaults for justify/align-self

A
B
C
D

Simple responsive dashboard

q&a

Grid versus Flexbox?

Wrong question

Grid AND Flexbox

Figuring out flexbox

Flex axes

Flex terminology

Flex lines

Single flex line, nowrap
nowrap
Multiple flex lines, wrap
wrap
Multiple flex lines, wrap-reverse
wrap-reverse

Flex directions

1一
2二
3三
4四
5五
6六
7七
8八
9九
10十
11十一
12十二
13十三
14十四
15十五
16十六
17十七
18十八
19十四
20二十
q&a

What is the most common mistake developers make when using flexbox?

Not using the flex shorthand

“Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.”
—CSS Flexible Box Layout Module Level 1

Basic flex keyword values

initial 0 1 auto cannot grow but can shrink when there isn't enough space
auto 1 1 auto can grow and shrink to fit available space
none 0 0 auto cannot grow or shrink, AKA inflexible
<positive-number> <positive-number> 1 0 can grow and shrink, extent of growth depends on flex factor
“When a box is a flex item, flex is consulted instead of the main size property to determine the main size of the box.”
—CSS Flexible Box Layout Module Level 1

The flex syntax

Flex syntax explained
/* One value, unitless number: flex-grow */
flex: 3;

/* One value, width/height: flex-basis */
flex: 200px;
flex: 45em;

/* Two values: flex-grow | flex-basis */
flex: 1 25ch;

/* Two values: flex-grow | flex-shrink */
flex: 2 1;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 3 30%;

Aligning with auto margins

Defining “auto” by Elika Etemad (AKA fantasai)

Aligning along the main axis

justify-content helps distribute extra free space left over after flexible lengths and auto margins are resolved.

1一
2二
3三
4四
5五
6六
7七
8八
9九
10十
11十一
12十二
13十三
14十四
15十五
16十六
17十七
18十八
19十四
20二十
justify-content values for main axis alignment

Aligning along the cross axis

align-items sets the default alignment for all flex items along the cross axis of the flex line. Over-ridable by align-self.

1一
2二
3三
4四
5五
6六
7七
8八
9九
10十
11十一
12十二
13十三
14十四
15十五
16十六
17十七
18十八
19十四
20二十
align-items values for cross axis alignment

Packing flex lines

align-content aligns flex lines within the flex container if there is extra space along the cross-axis.

1一
2二
3三
4四
5五
6六
7七
8八
9九
10十
11十一
12十二
13十三
14十四
15十五
16十六
17十七
18十八
19十四
20二十

Responsive configuration page

q&a

Is it safe to use CSS grid in production?

Falling back with style

Using @supports AKA feature queries

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

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

Diagonal header

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

q&a

How we can improve design using grids?

and

What are some of the amazing techniques you've seen that use CSS Grid?

Overlap

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

See the Pen Grid layout with overlaps by Chen Hui Jing (@huijing) on CodePen.

See the Pen Charles Hayter's colour diagrams by Chen Hui Jing (@huijing) on CodePen.

Vertical whitespace

Screenshot of Talk.CSS #27 recap https://singaporecss.github.io/specials/s2701.html

CSS grid showcase

Isometric eCommerce CSSGrid
by Andy Barefoot
Scantron Answer Sheet (CSS grid demo)
by Jon Kantner
Ikko Tanaka (pure CSS)
by Yuan Chuan
CSS Grid as a mask
by Andy Barefoot

CSS grid showcase

Malerei, Fotografie, Film (pg. 126)
by Chen Hui Jing
Pure CSS crossword - CSS Grid
by Adrian Roworth
Comic book style layout with CSS Grid
by Aysha Anggraini
Braun HiFi Steuergerät audio 300
by Chen Hui Jing

Artist profile page

q&a

Q&A time!

(for the rest of the questions not already covered)

  • What feature would you like to add to the current spec of CSS grid?
  • Did you start off as a freelancer? How difficult was it to get your first client?
  • Tips for when you feel inferior about your work?
  • Describe design in three words?
CSS as a team sport
“CSS is a team sport.”
—Me

Useful references

Salamat!

Websitehttps://www.chenhuijing.com

Twitter@hj_chen

Medium@hj_chen

Codepen@huijing

Font used is Prospectus, by Dave Bailey