CSS grid-template-columns属性探讨|给你代码

zhezhongyun 2025-06-09 07:24 31 浏览

CSSgrid布局

CSS grid布局是一种很强大的布局，兼容性如上表所示，表现在控制台里，你可以清楚看到他的内部每一个块都由一个虚线方块组成。他的每行每列都会生产一个单元格，而划分他们之间的线称为网格线。我这次就主要讲述其中两个属性。

内容

1.grid-template-columns(rows), 他可以的定义网格列或者行的维度大小，在属性数值上，除了比较常用的属性，还支持fr，flex弹性系数，可以根据该数值比例来分配剩余空间。还有[xx]在属性数值里定义网格线的名称，方便以后再次引用他。还有repeat属性。

如图所示的样式，是类似列表一样有很多重复的模块，就可以用到repeat属性来进行重复。

repeat(5, 250px);类似这样的属性数值。那么我就想了，如果只是这样，普通的布局也能实际，为啥要用这个repeat呢。如果我想自适应宽度变化可以吗？答案是支持的。repeat还支持auto-fill, auto-fit这2个属性能进行自动填充，配合minmax属性可以实现根据宽度进行子列表的自适应布局。如：repeat(auto-fill, minmax(100px, 1fr)); 代表了自动填充，minmanx最小值，配合flex分配空间。

关于autfo-fit，autofill的区别在mdn上有解释，但是可能难理解，直接利用mdn上2个例子。

grid-template-columns: repeat(auto-fill, minmax(10px, 1fr));

grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));

可以清楚的看到，在网格不能填满一行的时候，auto-fit会尽可能的让元素去填满他，也就是说剩余的空间会被分配到每个元素上,而auto-fill还是按照原来的布局，模拟元素可以填满一行的情况。

2.grid-gap设置网格行和列之间的间隙大小

兼容情况如下图所示：

根据mdn文档，实验中的功能gap(grid-gap)属性也被flex布局所支持。但是兼容性应该不好太好。

gap属性有什么用呢？

如上图布局,如果支持gap，那么只要之间写一个gap: 1px就可以了。不然的话，就比较繁琐了，只能利用边距去实现。

总结

css grid还有很多属性可以用来布局元素，本文仅仅只是讲到了一小点。它在现代浏览器中的支持度还是不错的，可以多多用它。如果支持的浏览器兼容性不是太好的话，只能用其他东西来代替它了。

给你代码｜往期回顾：

给你代码：短链接生成原理

给你代码：网站图标favicon自动抓取

给你代码：chrome插件心得

columns 属性

上一篇：7K star!Text2SQL还不够?试试RAG2SQL的开源工具
下一篇：excel的高级用法——宏，原来如此实用

CSS grid-template-columns属性探讨|给你代码

CSSgrid布局

内容

总结

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）