CSS Grid

People have been doing grids in CSS for a long time, but they are finally here as a first class citizen.

Grids are used in design to lay out elements.

Grids have lines and tracks.

Lines and tracks can be named.

Content can be placed in a specific grid locations, and can span lines and tracks.

Grids can specify item gap.

Grid vs Table

HTML tables are for displaying tabular data.

Table rows and columns will resize to fit the content.

Cell borders can collapse.

Cells can span rows and columns.

Cells can use vertical-align.

CSS grids have more control over row and column sizes.

Subgrid

Subgrids inherit the grid from their container.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid

Level
Topics