CSS网格布局详解：列行设置全攻略

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《CSS网格布局列行设置详解》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

grid-template-columns和grid-template-rows用于定义网格的列宽和行高。前者设置列的宽度，支持固定单位、fr弹性单位、repeat()重复函数和minmax()最小最大值函数，如repeat(3, 1fr)创建三等分列；后者设置行的高度，用法类似，如grid-template-rows: 100px 200px定义两行固定高度。两者结合可构建二维布局，如.container设为display: grid后，配合gap实现响应式网格。使用fr、repeat和minmax能提升布局灵活性。

在CSS中使用网格布局时，grid-template-columns 和 grid-template-rows 是定义网格结构的核心属性。它们用来设置网格的列宽和行高，控制整体布局的划分方式。

grid-template-columns：定义列的宽度

该属性用于指定网格容器中每一列的宽度。可以使用固定单位（如px）、相对单位（如fr、%）或函数（如minmax()、repeat()）来设置。

• 固定宽度列： grid-template-columns: 100px 200px 100px; —— 创建三列，宽度分别为100px、200px、100px。
• 等分弹性列（fr单位）： grid-template-columns: 1fr 2fr; —— 第二列是第一列的两倍宽，总空间按比例分配。
• 重复模式（repeat函数）： grid-template-columns: repeat(3, 1fr); —— 创建三个等宽的列。
• 混合单位： grid-template-columns: 100px 1fr 2fr; —— 第一列为固定宽度，其余按比例分配剩余空间。
• 最小最大值（minmax）： grid-template-columns: repeat(4, minmax(100px, 1fr)); —— 每列至少100px，最多占满可用空间。

grid-template-rows：定义行的高度

与列类似，该属性设置网格中每一行的高度。使用方式和单位基本一致。

• 固定高度行： grid-template-rows: 50px 100px; —— 创建两行，高度分别为50px和100px。
• 弹性行高： grid-template-rows: 1fr 2fr; —— 第二行高度是第一行的两倍。
• 自适应内容高度： grid-template-rows: auto 1fr; —— 第一行根据内容自动调整，第二行填满剩余空间。
• 结合minmax限制行高： grid-template-rows: minmax(60px, auto) 1fr; —— 第一行最小60px，内容多时可扩展。

实际布局中的配合使用

在一个网格容器中，同时设置列和行可以构建二维布局结构。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 200px;
  gap: 10px;
}

这样会生成一个三列等宽、两行固定高度的网格，项目将按先行后列的顺序填充。

本篇关于《CSS网格布局详解：列行设置全攻略》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！