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：

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: 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"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！