记录grid布局属性

新时代的弩力

于 2024-06-22 01:12:08 发布

阅读量245

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/qq_42372534/article/details/131399627

grid布局

分为容器和项目元素

容器属性

#container{
   
   
	display:grid;
	grid-template-columns:100px 100px 100px;
	/* 1fr 表示比例为占1份 */
	grid-template-columns:1fr 100px 1fr;
	/*100px为1列,自动填充,容器宽度不足则换行*/
	grid-template-columns:repeat(auto-fill,100px);
	/* 表示列为100px 以及 最大值为1fr,最小值为100px的列 */
	grid-template-columns:100px maxmin(100px,1fr)
	grid-template-columns: 100px auto 100px;