grid 布局属性

LiuBeiRong

已于 2022-05-17 10:43:22 修改

阅读量373

点赞数

文章标签： javascript css css3

于 2022-05-16 12:22:04 首次发布

本文链接：https://blog.csdn.net/zyklbr/article/details/124796017

版权

本文主要探讨CSS3的Grid布局，重点讲述容器属性的使用，包括如何定义网格线、网格区域以及对齐方式等，帮助开发者更好地理解和应用Grid布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

容器属性

[列]
grid-template-columns
[行]
grid-template-rows
[行间距]
grid-row-gap
[列间距]
grid-column-gap
[行间距][列间距]缩写
grid-gap
[划分区域]
grid-template-areas
[项目排列方式]
grid-auto-flow
[项目×排列方式]
justify-items
[项目y排列方式]
align-items
(align-items,justify-items缩写)
place-items
[内容区×位置]
justify-content
[内容区y位置]
align-content
(justify-content,align-content缩写）
place-content
[多余项目宽]
grid-auto-columns
[多余项目高]
grid-auto-rows

grid-template-columns

//常规写法
grid-template-columns:100px 100px 100px
//repeat函数
grid-template-columns: repeat(3, 100px);
//列宽固定，列数不固定，autofill将会自动分配容器宽度
grid-template-columns: repeat(auto-fill,100px);
//fr代表不指定item宽度，根据列数平均分配
grid-template-columns: repeat(3, 1fr);
//minmax指定的列宽范围，最小长度150px
grid-template-columns: 1fr minmax(150px,1fr);
//auto自适应剩余宽度
grid-template-columns: 10