玩转subgrid

本文中我们将了解如何使用 CSS Grid 的 subgrid 功能来对齐并排放置框的内容。

注意:在深入学习 subgrid 之前,了解 Grid 布局的基础知识很重要。可以参考MDN

1. 问题

如下图显示一行中的三个框。它们的内容不同,但由于 Grid 布局,它们的高度都相同。

每个盒子中的子组件不对齐,看起来非常不协调,但是Grid 是无法实现子组件对齐。对于 Grid 而言,只有一行框,它没有提供将它们包含的内容对齐到行中的方法。但是通过使用 subgrid,我们可以得到如下所示的结果。

下面让我们看看如何使用 subgrid 来实现这个效果。

2. 实现

2.1 搭建基本骨架

以下是我们演示的基本 HTML:

css 复制代码
<article>
  <section></section>
  <section></section>
  <section></section>
</article>

我们有 3个<article> ,每个包含三个 <section> 元素。<article> CSS设置为:

css 复制代码
article {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 10px;
}

这样<section> 元素排列在三列中。

每个 <section> 都包含一个 <h1>一个 <ul> 和一个 <div>

css 复制代码
<section>
    <h1>CSS 基础</h1>
    <ul>
        <li>flex</li>
        <li>grid</li>
    </ul>
    <div>CSS(层叠样式表)用于为网页添加样式</div>
</section>
<section>
    <h1>HTML基础:这是基本骨架</h1>
    <ul>
        <li>div</li>
        <li>span</li>
        <li>h1</li>
    </ul>
    <div>这个模块为学习 HTML 奠定了基础,让你熟悉重要的概念和语法</div>
</section>
<section>
    <h1>JavaScript 基础:一份全面的 JavaScript 指南,面向从初级到高级的学习者</h1>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <div>我们首先回答一些基本问题,例如"什么是 JavaScript?"、"它看起来是什么样的?"和"它能做什么?"</div>
</section>

此时,网格中的每一列其实都是一样的,但并不是每一列都充满了内容。如下图所示:

每列中的内容量不同,因此它们的高度不同。如何使它们高度一致,下面接着看:

2.2 section设置display:grid

只能在设置为 display: grid 的元素上使用 subgrid 值。由于我们想使用 subgrid 来对齐 <section> 元素的内容,因此我们需要将section设置为 display: grid

css 复制代码
section {
  display: grid;
}

内容现在填充我们的每个列,如下图所示:

注意:内容被拉伸到全高,因为列的默认设置是 align-content: stretch

2.3 使用子网格对齐内容

最后一步是让每列中的三个元素在行中对齐。首先,我们将 grid-template-rows 属性设置为 subgrid

css 复制代码
section {
  display: grid;
  grid-template-rows: subgrid;
}

如下图所示:

这里会很奇怪?为什么我们只能看到每列的最后一个元素。

问题在于我们的 <article> 元素只有一行,因此每个部分中的元素在那一行中彼此堆叠在一起。

我们需要告诉子网格内容跨越三行:

css 复制代码
section {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

我们的内容现在跨越子网格的三行,如下所示。

3. 浏览器支持

自 2023 年底以来,subgrid 已在所有主流浏览器中运行,可查看 caniuse 站点。所以现在开始使用 subgrid 是没有问题的。

4. 总结

最后总结一下:在 CSS Grid 中,通过 subgrid,可以解决多个子元素对齐不一致的问题,尤其是在不同列高度不一致时,使用 subgrid 可以让子元素在各列中对齐。

如有错误,请指正O^O!

相关推荐
腾讯TNTWeb前端团队1 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰5 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪5 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪5 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy6 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom7 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom7 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom7 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试