CSS Grid 布局是一种强大的布局方式，它可以让我们更轻松地实现复杂的布局效果。在使用 CSS Grid 布局时，我们通常会把它用于布局块级元素，但是，CSS Grid 布局也可以用于布局行内元素。本文将介绍如何使用 CSS Grid 布局行内元素。
行内元素的默认布局方式
在介绍如何使用 CSS Grid 布局行内元素之前，我们先来了解一下行内元素的默认布局方式。行内元素默认是按照从左到右的顺序排列，如果一行放不下，就会自动换行。
我们可以通过以下代码来创建一些行内元素：
-- -------------------- ---- ------- ---- ------------------ -------------- -------------- -------------- -------------- -------------- -------------- -------------- -------------- -------------- ------展开代码
默认情况下，这些行内元素会按照从左到右的顺序排列，如果一行放不下，就会自动换行。如下图所示：
使用 CSS Grid 布局行内元素
如果我们想要改变行内元素的布局方式，可以使用 CSS Grid 布局。在使用 CSS Grid 布局时，我们需要在行内元素的父元素上设置 display: grid; 属性，然后再定义网格列。
下面是一个简单的示例，我们将行内元素的父元素 .container 设置为网格布局，并定义了 3 列：
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; }
然后我们再将行内元素的宽度设置为 100%，并设置 text-align: center; 属性，使它们居中对齐。如下所示：
.container span { width: 100%; text-align: center; }
最终的代码如下所示：
-- -------------------- ---- ------- ---- ------------------ -------------- -------------- -------------- -------------- -------------- -------------- -------------- -------------- -------------- ------ ------- ---------- - -------- ----- ---------------------- --- --- ---- - ---------- ---- - ------ ----- ----------- ------- - --------展开代码
最终的效果如下所示：
总结
通过以上示例，我们可以看到，使用 CSS Grid 布局行内元素非常简单，只需要将行内元素的父元素设置为网格布局，再定义网格列即可。
使用 CSS Grid 布局行内元素可以让我们更加灵活地控制行内元素的排列方式，使得我们可以实现更复杂的布局效果。如果你正在学习 CSS Grid 布局，不妨尝试一下使用 CSS Grid 布局行内元素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66333af3d3423812e40d09e0
