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



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

基本概念：

• 网格容器：包含网格布局的元素。
• 网格线：将网格容器划分为列和行的垂直和水平线。
• 网格单元格：网格线形成的区域。
• 网格项：放置在网格单元格中的元素。

创建网格布局：

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

定义列和行：

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

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

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

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

minmax()函数值：

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

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

repeat()函数值：

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

在无法确认要重复几列时，重复次数使用关键字：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布局自动生成网站

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/26189.html