How Subgrid enhances CSS Grid

WordCamp Europe 2020

CSS Grid quick start

• Create two-dimensional layouts with native CSS
• It introduces several new properties, functions and a new unit for the structure, alignment and sizing of elements
• Introducted to all major browsers in 2017

CSS Grid usage

Firefox Dev Tools

Nesting in CSS Grid

• Currently, only direct children of a grid element can be positioned on the grid
• Grandchildren display in normal document flow
• A child element can become a new grid container
• But nested grid containers are independent

So what is Subgrid?

• Subgrid solves the problem of inheritance that CSS Grid is currently not capable of
• It enables grandchild elements to use the defined grid
• Subgrid used to be in Level 1 of the CSS Grid specification, but it was removed from the final release to improve it further

Good and bad news

Subgrid usage

Applying Subgrid

• subgrid is a new value for two properties:

  • grid-template-columns
  • grid-template-rows
• You can use either one of them or both at the same time
• When using both, be careful with implicit grids

Line numbers & names

• Line numbers in a subgrid start from 1 again - they do not use the line numbers of the parent grid.

• Line names on the parent grid are passed to the subgrid!

Gap properties

• If gutters are defined on the parent grid container, it will be passed to the subgrid

  • Properties: gap, column-gap and row-gap

• You can change the gap properties on the subgrid if needed

Thank you!

Jessica Lyschik

Frontend Developer

@jessicalyschik

jessicalyschik.com