如何用css display:grid创建网格容器-css教程-PHP中文网

如何用css display:grid创建网格容器

P粉602998670

发布： 2025-09-30 19:13:02

原创

178人浏览过

设置display为grid或inline-grid可创建网格容器，其直接子元素成为网格项；通过grid-template-columns和grid-template-rows定义行列结构，repeat()函数简化重复代码，gap属性设置间距，注意仅直接子元素参与布局。

如何用css display:grid创建网格容器

要使用 display: grid 创建网格容器，只需要将 CSS 的 display 属性设置为 grid 或 inline-grid，元素就会变成一个网格容器，其直接子元素会自动成为网格项。下面详细介绍如何操作和常用配置。

给一个父元素设置 display: grid，它就变成了一个块级网格容器。

.container {
  display: grid;
}

登录后复制

如果希望它是行内级容器（类似 inline-block），可以使用：

.container {
  display: inline-grid;
}

登录后复制

通过 grid-template-columns 和 grid-template-rows 可以定义网格的列宽和行高。

例如，创建一个三列、每列宽度相等的网格：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

登录后复制

或者创建两行，高度分别为 100px 和 50px：

知网AI智能写作

知网AI智能写作，写文档、写报告如此简单

.container {
  display: grid;
  grid-template-rows: 100px 50px;
}

登录后复制

当列或行重复时，可以用 repeat() 函数简化代码。

比如创建 4 列，每列占 1fr：

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

登录后复制

使用 gap 属性设置网格项之间的间距。

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

登录后复制

也可以分别设置行和列的间距：

gap: 10px 20px; /* 行间距 10px，列间距 20px */

登录后复制

基本上就这些。只要设置 display: grid，再定义行列结构和间距，就能快速构建灵活的布局。不复杂但容易忽略细节，比如子元素必须是直接后代才会参与网格布局。

以上就是如何用css display:grid创建网格容器的详细内容，更多请关注php中文网其它相关文章！

大家都在看：