设置display为grid或inline-grid可创建网格容器，其直接子元素成为网格项；通过grid-template-columns和grid-template-rows定义行列结构，repeat()函数简化重复代码，gap属性设置间距，注意仅直接子元素参与布局。
要使用 display: grid 创建网格容器，只需要将 CSS 的 display 属性设置为 grid 或 inline-grid，元素就会变成一个网格容器，其直接子元素会自动成为网格项。下面详细介绍如何操作和常用配置。
1. 创建基本网格容器
给一个父元素设置 display: grid，它就变成了一个块级网格容器。
.container { display: grid;}
如果希望它是行内级容器（类似 inline-block），可以使用：
.container { display: inline-grid;}
2. 定义行和列
通过 grid-template-columns 和 grid-template-rows 可以定义网格的列宽和行高。
立即学习“前端免费学习笔记（深入）”；
例如，创建一个三列、每列宽度相等的网格：
.container { display: grid; grid-template-columns: 1fr 1fr 1fr;}
或者创建两行，高度分别为 100px 和 50px：
企业软件介绍主页html模板
一款多用途的企业软件前端HTML模板。IT软件服务公司网站响应式单页模板。基于CSS、JS、HTML模块化原则创建的。如果您的站点不需要所有元素，那么可以轻松地删除不必要的组件。模板的代码干净，友好，注释良好。这使得编辑和自定义模板变得很容易。
350 查看详情
.container { display: grid; grid-template-rows: 100px 50px;}
3. 使用 repeat() 简化写法
当列或行重复时，可以用 repeat() 函数简化代码。
比如创建 4 列，每列占 1fr：
.container { display: grid; grid-template-columns: repeat(4, 1fr);}
4. 添加间距（gap）
使用 gap 属性设置网格项之间的间距。
.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}
也可以分别设置行和列的间距：
gap: 10px 20px; /* 行间距 10px，列间距 20px */
基本上就这些。只要设置 display: grid，再定义行列结构和间距，就能快速构建灵活的布局。不复杂但容易忽略细节，比如子元素必须是直接后代才会参与网格布局。
以上就是如何用css display:grid创建网格容器的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1041195.html
微信扫一扫 
支付宝扫一扫 
