CSS Subgrid

We believe in learning together and sharing our knowledge. Every week we host an internal Koodikorneri (Code Corner) session where we discuss current topics and anyone can present their learnings. In the long term, we aim to further build ways of sharing our knowledge outside the company.

What is CSS Subgrid?

Subgrid is a new value for css grid template. It allows the child container of a grid to adopt the same grid layout as the parent. This allows us to control the content of the children even better and without the need of creating more grids inside grids.

Subgrid can be used by selecting “subgrid” attribute on the grid-template-rows/column property.

Subgrid example html. Container which children have text of different lengths.

Subgrid example css. Content uses the same grid row template as the container.

At the time of writing subgrid still has low 16% support among browsers, but many of them have it behind a test flag.

For more information, please refer to: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid.

Container Queries

Container queries allow us to make media queries on container sizes. This allows us to modify the content of the container to fit its content in different places instead of having to rely on screen width or height. Same button can be used in different sizes of containers and it makes itself fit there nicely.

Container query can be used by giving the container “container-type” property.

Container queries example html. Container with button, some text and an icon.

Container queries example css. 3 different container queries which adjust text.

Container queries have support of 65% among browsers which means it is almost usable!

For more information, please refer to : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries.