css3网格布局grid

最新推荐文章于 2024-09-05 18:16:48 发布

执念MJ

最新推荐文章于 2024-09-05 18:16:48 发布

阅读量173

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/AMD23/article/details/119423047

版权

本文详细介绍了CSS3的Grid布局，包括容器的定义、行和列的概念、关键属性如grid-template-columns、grid-template-rows、grid-gap等的使用，以及子级元素的grid-area和place-self属性。对比了Grid布局与Flex布局的区别，强调了Grid布局在二维布局中的强大能力。

摘要由CSDN通过智能技术生成

定义：网格布局（Grid）它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局
概念：采用网格布局的区域，称为"容器"（container）。
行和列
容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。
行和列的交叉区域，称为"单元格"（cell）。正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

添加在容器（父元素）上的属性
1.display：grid； display：inline-grid；指定一个容器采用网格布局
2.grid-template-columns 属性设置每列的列宽
A、grid-template-columns: 100px 100px 100px;
B、grid-template-columns: repeat(3, 33.33%);
C、grid-template-columns: 1fr 1fr; fr关键字
repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。
3、grid-template-rows属性定义每一行的行高。
4、grid-gap属性是grid-column-gap和grid-row-gap的合并简写，设置行和列间距
5. place-items：place-items属性是align-items属性和justify-items属性的合并简写形式，设置单元格内容在水平垂直的对齐方式