玩转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!

相关推荐
会发光的猪。33 分钟前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客1 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记1 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
前端李易安1 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
红绿鲤鱼1 小时前
React-自定义Hook与逻辑共享
前端·react.js·前端框架
Domain-zhuo1 小时前
什么是JavaScript原型链?
开发语言·前端·javascript·jvm·ecmascript·原型模式
小丁爱养花2 小时前
前端三剑客(三):JavaScript
开发语言·前端·javascript
ZwaterZ2 小时前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
西凉河的葛三叔2 小时前
vue3+elementui-plus el-dialog全局配置点击空白处不关闭弹窗
前端·vue3·elementui-plus
周三有雨2 小时前
【面试题系列Vue07】Vuex是什么?使用Vuex的好处有哪些?
前端·vue.js·面试·typescript