Making CSS from Good to Great

The Power of Subgrid

Chen Hui Jing / @hj_chen

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

@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, 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

사용자 인터페이스 디자인에 최적화되고보다 복잡한 응용 프로그램 및 웹 페이지를 레이아웃하기 위해 설계된 CSS 상자 모델을 설명합니다

Grid layout

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

사용자 인터페이스 디자인에 최적화 된 2 차원 그리드 기반 레이아웃 시스템을 정의합니다

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

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

Using DevTools to learn Subgrid

Browser support for subgrid

References

감사합니다 🙇‍♀️

Layout technique: `inline-block`

Layout technique: `float`

Layout technique: `flex`