css如何使用subgrid

这篇文章主要为大家展示了“css如何使用subgrid”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css如何使用subgrid”这篇文章吧。

subgrid

1. 基本概念

作为 CSS Grid Layout Module 2 规范的一部分，subgrid 允许元素在行轴或列轴上继承其父元素的网格。subgrid 对于解决各种用户界面挑战非常有用。

例如，以下面这个带有标题的图像为例。标题的长度各不相同，使用 subgrid 可以直接让它们对齐，而无需设置固定的高度。

2. 使用方法

首先将父元素设置为grid布局，将子元素的“grid-template-columns”或“grid-template-rows”属性设置为 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;}

实现效果：

完整代码：

html：

<div class="grid">  <figure>    <img class="lazy" data-src='https://images.unsplash.com/photo-1633083018029-bd1d4d52cb19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTE5NTYyMw&ixlib=rb-1.2.1&q=80&w=400' alt='Bluetit'>    <figcaption>A colourful mix of blue, yellow, white and green makes the blue tit one of our most attractive and most recognisable garden visitors.</figcaption>  </figure>  <figure>    <img class="lazy" data-src='https://images.unsplash.com/photo-1619976302135-5efbc2a7785a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTE5NTY4NA&ixlib=rb-1.2.1&q=80&w=400' alt='Robin'>    <figcaption>Robins sing nearly all year round and despite their cute appearance, they are aggressively territorial and are quick to drive away intruders.</figcaption>  </figure>  <figure>    <img class="lazy" data-src='https://images.unsplash.com/photo-1623627733740-4724cb1fe84e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTE5NTc4NQ&ixlib=rb-1.2.1&q=80&w=400' alt='Chaffinch'>    <figcaption>The chaffinch is one of the most widespread and abundant bird in Britian and Ireland.</figcaption>  </figure></div>

CSS：

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

3. 当前状态

值得注意的是，自 2019 年以来，Firefox 已经支持了 subgrid，但近三年后还没有其他浏览器跟进。有迹象表明 Chromium 团队已经开始着手实现它，所以可能有幸在今年看到它登陆 Chrome 和 Edge。

以上是“css如何使用subgrid”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！