Web layouts over the years

(╯°□°）╯︵ ┻━┻

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

Layout technique: float

Layout technique: flex

Grid is the only layout technique that establishes a relationship between rows and columns of grid items.

只有Grid中的行列才是真實的，是有關係的。

Basics of CSS Grid

Define your grid.
建立格線容器

Place items in the grid.
放置格線單元

Grid terminology

Browser support for Grid (Level 1)

Using DevTools to learn Grid

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

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>?

.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

Browser support for subgrid