How css uses subgrid

This article mainly shows you "css how to use subgrid", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "css how to use subgrid" this article.

Subgrid1. Basic concept

As part of the CSS Grid Layout Module 2 specification, subgrid allows elements to inherit the grid of their parent elements on row or column axes. Subgrid is very useful for solving various user interface challenges.

For example, take the following image with a title as an example. Titles vary in length, and you can use subgrid to align them directly without setting a fixed height.

two。 Usage

First, set the parent element to the grid layout and set the "grid-template-columns" or "grid-template-rows" attribute of the child element to subgrid:

.grid {display: grid; grid-template-columns: repeat (3, 1fr); grid-template-rows: repeat (2, auto);} .grid > figure {display: grid; grid-template-rows: subgrid;} .grid figcaption {grid-row: 2;}

Achieve results:

Complete code:

Html:

A colourful mix of blue, yellow, white and green makes the blue tit one of our most attractive and most recognisable garden visitors.

Robins sing nearly all year round and despite their cute appearance, they are aggressively territorial and are quick to drive away intruders.

The chaffinch is one of the most widespread and abundant bird in Britian and Ireland.

CSS:

* {box-sizing: border-box;} body {font-family: "Open Sans", sans-serif; margin: 0; padding: max (1rem, 3vw);} figure {margin: 0; display: grid;/* grid-template-rows: subgrid; * / / * grid-row: 1 / 3; * /} img {display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; grid-row: 1 / 3; grid-column: 1 } figcaption {padding: 1rem1; grid-column: 1; grid-row: 2; background: hsl; color: white;}. Grid {display: grid; max-width: 80remr; margin: 0 auto; grid-template-columns: repeat (auto-fit, minmax (300px, 300px, 1fr)); gap: 1.5remt;} @ media (min-width: 62em) {.grid {grid-template-rows: 1fr auto } figure {grid-template-rows: subgrid; grid-row: 1 / 3;}}

3. Current state

It is worth noting that Firefox has supported subgrid since 2019, but no other browsers have followed suit nearly three years later. There are signs that the Chromium team is already working on it, so you may be lucky to see it log on to Chrome and Edge this year.

The above is all the content of the article "how css uses subgrid". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!