Making CSS from Good to Great

The Power of Subgrid

🇸🇬 Singlish edition 🇸🇬

😏 Singlish-o-meter 🤔

For the benefit of the audience who are unfamiliar with English spoken in Singapore, there is a range. Best explained in a graphical form. FYI, this is a legitimate HTML range input. Come ask me how it's built later.

So today, I will try to keep the level somewhere in the middle of Queen's english, and extreme Singlish. In general, the “R” sound sometimes becomes “L”, like ready will may sound like leddy. Also, the “ver” sound may often just be omiited. Like, government, will become gahmen. Or nevermind, will become nehmind. Also, grammar is optional.

Other than that, it should be mostly comprehensible. If you feel a lack of confidence, please sit next to a friendly Singlish-speaking attendee. They will decipher all of this for you.

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

@hj_chen

Singlish lesson: Tok Kong

Hokkien term meaning “superb” or “top of the line”.
In Mandarin, it's possible to write it as “督公 (dū gōng) ”
“Have you used CSS grid to build layout? It's super tok kong!”

Source: The Coxford Singlish Dictionary

🥑 Developer Advocate 🥑

Web layouts over the years

Singlish lesson: Swee

Hokkien for “pretty” or “beautiful”. Also used to describe something as properly or correctly done.
“This layout do until very swee leh.”

Source: The Coxford Singlish Dictionary

Singlish lesson: Jia lat

Hokkien adjective literally meaning "to eat strength". Means that a task is onerous and consumes one's energy. Can sometimes be used to denote being in trouble.
“Have you inspected Twitter lately? The markup nest until very jia lat leh.”

Source: The Coxford Singlish Dictionary

(╯°□°）╯︵ ┻━┻

Singlish lesson: Senget

Malay for “slanted” or “crooked”.
“How come the last item in the row senget wan?”

Source: The Coxford Singlish Dictionary

So when the web started out, got no layout. At most, can format text with spaces, line breaks and indents. But to have a do until swee-swee layout on your webpage. Kenot. 👾

The first time we can put things in specific positions on a webpage was probably 👾 in 1994 when table elements were supported in browsers. table element supposed to be for you all to make data tables, but like most things in life, they kena misuse. Because developers discovered… 👾 nesting. So in those days, the markup nest until very jia lat. 👾

Budden 👾 in 96 we got CSS. CSS got floats. So everybody need to learn new techniques. But 👾 floats very hard. Column height not even. Your inline things all senget 👾. Some more need to clear things.

And because it was so hard, 👾 people decide to build frameworks, like your Bootstrap, Foundation etc. Then let everyone else use CSS classes to build layouts. This approach very popular, so then we entered the age of all websites look the same.

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.

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

Can use inline-block technique. To make 3 columns, we set the display of the items to inline-block then everybody's width set to 1/3 of the container.

Layout technique: `float`

Item A

Item B

Item C

Item D

Item E

Item F

Don't like inline-block? Nehmind, can use 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.

Basics of CSS Grid

Define your grid.

Place items in the grid.

Grid terminology

Later might have some minor jargon, so clarify here first. 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, is can have gaps between tracks. No more funny negative margin and paddings sia. This feature has been expanded to flex layouts as well, so if you're using Firefox 63 and beyond, also can use.

Singlish lesson: Si bei

Originated from Teochew, means “very” or “extremely”
Literally translates to “死父 (sǐ fù) ” or “dead father”
“The CSS grid roll-out in 2017 was sibei successful.”

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

So CSS specs got level wan, right? Long story short, the CSS spec used to be very long document for the first 2 versions, budden in 2000 it was split up into modules so easier to test, update and maintain.

This split up version is the one everyone calls CSS3. And put in their resume together with HTML5. But there will never be CSS4 or CSS5 or whatever, because each CSS feature is a separate document now. When a feature grows too big, or something inside need more discussion, it gets deferred to the next level.

Subgrid was always important, but it needed more time to make sure it was implemented in a swee-swee manner, hence it was deferred to Level 2. So level 2 of the grid specification covers 👾 subgrid, as well as 👾 another thing called aspect-ratio-controlled gutters. But today only Subgrid la.

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

Thanks sia 🤗

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

🇸🇬 Singlish edition 🇸🇬

😏 Singlish-o-meter 🤔

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

Thanks sia 🤗

Layout technique: `inline-block`

Layout technique: `float`

Layout technique: `flex`