Grid is the new black

Revolutionising visual design on the web

This workshop assumes you have a reasonably good grasp of CSS, and how to handle specificity and the cascade. That you could write an entire site’s layout in vanilla CSS without any frameworks.

If you are a bit more novice on the CSS front, no worries, just that the pace might be a little fast. But you can ask our facilitator, Shirlaine, for help if you get really lost.

Just to get a grasp of the audience today, how many people have used CSS grid before? In production? How many of you use Flexbox day-to-day? And what’s the most common technique you use to build your layouts? Floats? Tables?

If you ask me, I will always say context matters. That there is never a single way to achieve something, so don’t treat whatever you learn today as dogma, or the ONE WAY. Think of this as adding tools to your CSS toolbox, and it’s up to you to choose the right tool for the right situation.

Starter files

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

Firefox Nightly

Text editor

Pencil and paper

Does everybody have Firefox Nightly installed? And I think you all should have received some instructions via email outlining the different ways you can set this up. At the end of the day, everything we are doing is vanilla HTML and CSS. There is nothing extra to install to get your code to work.

Nightly is recommended so you can make use of the Grid Inspector tool, and the starter kit is merely a workflow that I personally use because I’m too lazy to press Command-Shift-R hundreds of times a day. Like I said, the assumption is that this audience comprises of experienced web developers, so do whatever suits you best.

At the very least, just have an HTML file and write your styles between <style> tags in the <head>, or ideally in a separate style sheet. CodePen is definitely an option, I just wasn’t sure how stable the internet connection was going to be. Pencil and paper is a plus, you'll see.

Everybody set up? Good. Let’s begin.

Rendering engines 101

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

Images and explanations by Lin Clark

Anybody who worked/works in an agency? How often do you get designs that are very “print”? I believe not all agencies are the same, but very often, as the developer, I ended up with one comp, for desktop, and a bunch of people expecting the website to look exactly like the psd, down to the pixel.

Sometimes you’d get a comp for the mobile version too, and that usually made my life worse, because the mobile version’s layout isn’t even remotely related to the desktop version with regards to layout.

I truly believe this is because of a lack of understanding of how the web as a medium works. And I admit, earlier on in my career and life, I wasn’t the best communicator. I was kinda sullen, and would give my designers all varieties of dirty looks. So immature, really.

Does everyone know how a browser renders elements on the page? If so, just bear with me for a moment, I’ll try to give the abridged version. These graphics are from Lin Clark, author of Code Cartoons, and someone I really look up to in the web industry, and have personally learned a lot from.

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

When the web started, there was no way to do layout at all, because all browsers could do was display text, or maybe some images, if you were lucky. But as more users started getting online, people started to find new ways to utilise the web and design for it. So properties that were never meant to be used for layout, like HTML tables or floats, were the next best hack we could think of.

Eventually, this got really painful and people started relying on frameworks to do the heavy lifting, especially when it comes to the layout side of things. In fact, I've inherited a lot of legacy projects that include the entire Boostrap library but only use its grid system.

This is an overview of how web layouts have evolved over the years. CSS grid gives us a level of control over how elements are rendered on a page that we’ve never had before. And that’s the biggest reason why it is revolutionary.

Basic terminology

Grid terminology

There are a number of terms I will constantly refer to throughout this workshop, so let’s make sure everyone is on the same page. Grid lines are the horizontal and vertical lines that form the basis of the grid structure, and can be referred to by their numerical index, which starts from 1.

Each space between grid lines are known as grid tracks, which make up the rows and columns of the grid, and represent the spaces your items appear in.

The grid cell is a single unit of the grid and is made up of 2 adjacent row lines and 2 adjacent column lines. By default, each grid item takes up 1 grid cell. A grid area is made up of multiple grid cells.

The best part about Grid, is the ability to define grid gaps, which are the gutters between grid tracks. Fun fact, grid gap wasn't in the original specification until Rachel Andrew championed it during one of her conference talks.

One of the specification writers was in the audience and they worked together to get this feature into the specification. So the next time you use grid gap, remember you have Rachel Andrew to thank for this excellent feature.

Flexbox and Grid

Based on the container-child relationship

“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

The setup here is 6 items we want to place into a column grid. One approach creating such a layout is by using the inline-block technique. For a three column grid, we set the display of the items to inline-block and give them all a width of a third of the container.

Layout technique: `float`

Item A

Item B

Item C

Item D

Item E

Item F

It's almost the same if you use float, because you also need to set a width on each item.

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

Here, I'm telling the browser I want 3 sets of 2 columns in the ratio of 3 to 2. By using the fr unit, all the available space is divided up accordingly. The grid then grows and shrinks together with viewport because it will occupy all the free space available in the container.

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)	block containers, flex containers and grid containers
`align-content`	cross/block	content within element (effectively adjusts padding)	block containers, flex containers and grid containers
`justify-self`	inline	element within parent (effectively adjusts margins)	block-level boxes, absolutely-positioned boxes and grid items
`align-self`	cross/block	element within parent (effectively adjusts margins)	absolutely-positioned boxes, flex items and grid items
`justify-items`	inline	items inside box (controls child items)	block containers and grid containers
`align-items`	cross/block	items inside box (controls child items)	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`
`start`
`end`
`space-around`
`space-between`
`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!

https://www.chenhuijing.com