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