How CSS evolves, a look back at 2 years of CSS grid

Chen Hui Jing / @hj_chen

Hello, everyone! First of all, I want to the thank the organising team of DevFest Georgetown for bringing me home. And thank you all for being here today. I need to thank you all up front because recently, I've been a little upset when I think about CSS. Upset because CSS is becoming more and more awesome, but it seems as though people still think it's this limited, broken thing that doesn't work properly.

I don't know about the rest of you, but I was one of those people who loved CSS from the start. So much so that I tried doing everything in pure CSS if I could. Now that I'm slightly less immature, I realised that it wasn't the best idea, but it did make me very familiar with how CSS worked.

Then somehow, I got sort of involved a bit more with the folks who build browsers and develop web standards, and found the entire process very fascinating, and I wanted to share what I learned with all of you.

🇲🇾 👾 🏀 🚲 🖌️ 👟 💻 🖊️ 🎙 🦊 🥑 🧗 🏳️‍🌈

@hj_chen

🥑 Developer Advocate 🥑

Web layouts over the years

So when the web started out, there was no layout. You could format your text with spaces, line breaks and indents, sure. But having a designed visual layout on your web page? Nope.

The first time we could sort of place things in specific positions on a webpage was probably 👾 in 1994 when table elements were supported in browsers. Originally meant for people to make data tables, they were soon misused for layouts. Because developers discovered… 👾 nesting.

Then 👾 CSS came along in 1996, and with it came floats. And we learned a new way to layout elements on their page. But floats weren't easy to deal with. Columns were uneven heights, things got displaced and didn't line up, you had to clear stuff.

And because it was so hard, 👾 some people decided to build frameworks, and let everyone else apply these pre-written styles with CSS classes. This approach was really popular and we hit an age where a lot of websites had very similar layouts.

👾 But during that time, CSS also started to have properties that were designed to suit the web better, to suit the fact that content on the web is very different from any other static medium.

Think of CSS as an evolving technology. It started out in 1996 as a long monolithic document, and at the time, browser vendors treated the implementation of CSS a bit like how we Malaysians treat traffic laws. We take them as suggestions rather than rules.

The CSS Working Group was created in 1997 to tackle issues which were not addressed in the first version of CSS and they have been working on improving and evolving CSS ever since.

By 2000, CSS had been broken up into modules to clarify the relationships between different parts of the specification, and make it easier to test, update and maintain the specification as a whole.

The 2018 CSS Snapshot released in January this year now consists of 99 modules, many of which are being actively worked on.

Block layout

designed for laying out documents

Inline layout

designed for laying out text

Table layout

designed for laying out 2D data in a tabular format

Positioned layout

designed for very explicit positioning without much regard for other elements in the document

Flexible box layout

describes a CSS box model optimised for user interface design and designed for laying out more complex applications and webpages

Grid layout

Defines a two-dimensional grid-based layout system,
optimised for user interface design.

Why is CSS grid special?

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

You could use the inline-block technique. To make 3 columns, we set the display of the items to inline-block, then set the items' widths to 1/3 of the container.

Layout technique: `float`

Item A

Item B

Item C

Item D

Item E

Item F

Or maybe you don't like inline-block. No problem, you can do something similar with floats. It's very similar to inline-block, 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.

Grid versus Flexbox?

⚠️ Wrong question ⚠️

Grid AND Flexbox

Flexbox ➡ single dimension

Grid ➡ two dimensions

Where does CSS come from?

Browser vendors
Companies who need certain features
CSS working group

The CSS Working Group

Specification document statuses

Working Draft (WD)

to create a snapshot of the specification's current state and to solicit input from the W3C and the public

Last Call Working Draft (LC or LCWD)

to announce that the specification will move toward Candidate Recommendation unless significant issues are brought up

Candidate Recommendation (CR)

to express that all known issues have been resolved, and is a call for implementations

Proposed Recommendation (PR)

needs a comprehensive test suite and implementation reports proving that every feature is interoperably implemented in at least two shipping implementations

Recommendation (REC)

finally, a standard
An extremely excited cat

It's not a linear process…

…it shouldn’t come as a shock that grid-based layouts have been a goal of CSS since the beginning.

The Story of CSS Grid, from Its Creators by Aaron Gustafson

Fun facts about CSS grid

Numerous proposals submitted that were never implemented
First proposal that stuck was one from Microsoft (for Metro UI)
First implementation of Grid ever was in IE10 (with vendor prefix)
Bloomberg hired Igalia to implement CSS grid for Blink and WebKit
Rachel Andrew proposed gap to solve the gutter problem

Browser support for Grid (Level 1)

Basics of CSS grid

Define your grid.

Place items in the grid.

Grid terminology

I'll also be referring to some grid-specific terms later, so we'll cover them here. Grid lines are the horizontal and vertical lines that form the basis of the grid structure. We use a numerical index to reference the lines, and the index starts from 1. Like Lua, not C.

Each space between grid lines are called grid tracks, these are the rows and columns of your 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 is 1 grid cell. Many grid cells become grid area.

The best part about Grid are grid gaps, which let us add space between grid tracks. No need for awkward negative margins and padding tricks. This feature has been expanded to flex layouts as well, so if you're using Firefox 63 and beyond, you can gap your flex items too.

Using DevTools to learn Grid

Live examples QR code for link to example page

What's in Grid Level 2?

Level 2 expands Grid by:

adding “subgrid” capabilities for nested grids to participate in the sizing of their parent grids
aspect-ratio–controlled gutters

Some of us might not be too familiar the the levels in CSS specifications. Long story short, the CSS spec used to be a big monolithic document for the first 2 versions, but was split up into modules in 2000 to make it easier to test, develop and maintain the specification.

This split up version was commonly referred to as CSS3. But there is and will never be CSS4 or 5 and so on, because each CSS feature is a separate document now. Usually when a feature gets too complicated, or something in there requires more discussion, it gets deferred to the next level.

Subgrid was an important feature from the start, but it needed more time to ensure robustness, hence it was deferred to Level 2. So level 2 of the grid specification covers 👾 subgrid, as well as 👾 defines the behaviour for aspect-ratio-controlled gutters. But we'll only focus on subgrid right now.

Why do we need subgrid?

The subgrid syntax

Same properties, more values

grid-template-columns: subgrid <line-name-list>?
grid-template-rows: subgrid <line-name-list>?

The subgrid keyword indicates to the browser the nested grid will use the same sizing as its parent along the relevant axis.

.subgrid-container {
  grid-columns: 2 / 5; /* placement for the subgrid container itself */

  display: grid; /* you must still apply a display: grid to the subgrid */
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

Using DevTools to learn Subgrid

Live examples QR code for link to example page

Browser support for subgrid

References

Thank you!

https://www.chenhuijing.com

@hj_chen

@huijing

Font is Red Hat Display by Jeremy Mickel.

How CSS evolves, a look back at 2 years of CSS grid

Web layouts over the years

Block layout

Inline layout

Table layout

Positioned layout

Flexible box layout

Grid layout

Why is CSS grid special?

Layout technique: inline-block

Layout technique: float

Layout technique: flex

Grid versus Flexbox?

⚠️ Wrong question ⚠️

Grid AND Flexbox

Flexbox ➡ single dimension

Grid ➡ two dimensions

Where does CSS come from?

The CSS Working Group

Specification document statuses

Working Draft (WD)

Last Call Working Draft (LC or LCWD)

Candidate Recommendation (CR)

Proposed Recommendation (PR)

Recommendation (REC)

It's not a linear process…

Fun facts about CSS grid

Browser support for Grid (Level 1)

Basics of CSS grid

Grid terminology

Using DevTools to learn Grid

What's in Grid Level 2?

Why do we need subgrid?

The subgrid syntax

Using DevTools to learn Subgrid

Browser support for subgrid

References

Thank you!

Layout technique: `inline-block`

Layout technique: `float`

Layout technique: `flex`