Making CSS from Good to Great

The Power of Subgrid

Chen Hui Jing / @hj_chen

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, it was soon hacked to make all sorts of creative, interesting layouts.

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.

Tweet by Jon Gold on how all websites these days use 1 of 2 layouts

ブロックレイアウト

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.

二次元グリッドシステムを CSS にもたらします

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

One approach for creating such a layout could be 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

If floats are more your style, you can do that too. It's very similar to inline-block though, 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.

グリッドは、グリッド項目の行と列の間の関係を確立する唯一のレイアウト手法です。

Basics of CSS Grid

Define your grid.
グリッドコンテナーを作成する

Place items in the grid.
グリッドにアイテムを配置

Grid terminology

I'll be using some terms related to Grid throughout this talk, so I'd like to clarify them here. 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. This feature has been expanded to flex layouts as well, and you can already use it in Firefox 63 onwards.

Browser support for Grid (Level 1)

Using DevTools to learn Grid

Live demo

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

Named subgrid lines

Named grid line names and named subgrid line names

Using DevTools to learn Subgrid

Live demo

Browser support for subgrid

References

ありがとうございました 🙇‍♀️

https://www.chenhuijing.com

@hj_chen

@huijing

Header font is Ostrich Sans by Tyler Finck.
Body font is Libre Baskerville by Pablo Impallari.

Making CSS from Good to Great

The Power of Subgrid

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

Basics of CSS Grid

Grid terminology

Browser support for Grid (Level 1)

Using DevTools to learn Grid

What's in Grid Level 2?

Why do we need subgrid?

The subgrid syntax

Named subgrid lines

Using DevTools to learn Subgrid

Browser support for subgrid

References

ありがとうございました 🙇‍♀️

Layout technique: `inline-block`

Layout technique: `float`

Layout technique: `flex`