css grid布局（css grid布局居中）

编程日记 • 2025-09-26 09:06 • 阅读 43

CSS Grid 布局 是一种强大的布局系统，它允许你轻松创建复杂且响应式的布局。它使用网格系统，其中元素被放置在列和行中。

基本概念：

创建网格布局：

要创建网格布局，请使用属性：

定义列和行：

使用和属性定义网格的列和行：

上面的代码定义了三列和两行。表示列或行的宽度或高度将根据可用空间按比例分配，其中列的比例为1：2：1，行的比例为1：2，具体效果可参考最下方示例。

也可根据固定值与百分比等形式进行分配：

上面的代码定义了四列和两行，其中第一列宽100px；第二列占总宽度的20%；第三列和第四列按照剩余宽度的1：2进行平均分配。

minmax()函数值：

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

上面的代码定义了三列，若平均分配宽度小于100px，则最后一列占100px，剩余宽度前两列平均分配，若平均分配宽度大于100px，则平均分配。

repeat()函数值：

repeat()接受两个参数，第一个参数是重复的次数，第二个参数是要重复的值。

上面的代码定义了6列，第一列和第四列的宽度为100px，第二列和第五列为总宽度的20%，第三列和第六列为50px。
等同于以下写法：

在无法确认要重复几列时，重复次数使用关键字：auto-fill 或 auto-fit。如下所示：

其中auto-fill 会自动创建网格线以填充未分配的空间，而 auto-fit 不会（一般使用auto-fit）。

放置网格项：

使用 , , , 和属性放置网格项：

上面的代码将放置在从第一列到第三列、从第一行到第二行的区域中（会将gap区域一同覆盖）（参考最下方示例）。

其他属性：

CSS Grid 布局还提供了许多其他属性，用于控制网格项的对齐、间距和外观：

和：控制网格项在列和行中的对齐方式。
：设置网格项之间的间距，第一个参数为不同行之间的间距，第二个为不同列之间的间距，也可只传一个参数，将同时设置行和列之间的间距。
：使用一个简短的字符串（例如，“1 / 2 / 3 / 4”）指定网格项的区域，其中参数分别为< row-start > / < column-start > / < row-end > / < column-end >。

优点：

示例：

这是一个简单的网格布局示例，其中容器被划分为三列和两行：

效果：

上面代码将创建以下布局：

在这里插入图片描述
其中各模块的行和列的索引值如下图所示：

一般掌握以上内容就可应对绝大部分情况。你可以根据需要调整网格布局，以创建各种不同的设计。

grid布局自动生成网站