Grid网格布局

最新推荐文章于 2024-06-19 23:31:32 发布

猿人小彭

最新推荐文章于 2024-06-19 23:31:32 发布

阅读量251

点赞数 1

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

本文链接：https://blog.csdn.net/qq_37415014/article/details/109277645

版权

7 篇文章 0 订阅

订阅专栏

网格布局是最强大的CSS布局方案，主要用于页面的整体布局。可以将一个网页分成一个个网格，作出任意的组合。

容器：采用网格布局的区域，就是容器。

项目：容器内的子元素，就是项目。

display: grid指定一个容器采用网格布局。
grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。
rid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。
grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式
grid-template-areas属性用于定义区域。
grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。
justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。
place-items属性是align-items属性和justify-items属性的合并简写形式。
justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。
place-content属性是align-content属性和justify-content属性的合并简写形式。
grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。
grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。
grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

grid-column-start属性：左边框所在的垂直网格线， grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线， grid-row-end属性：下边框所在的水平网格线
grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和 - grid-row-end的合并简写形式。
grid-area属性指定项目放在哪一个区域。
justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。
place-self属性是align-self属性和justify-self属性的合并简写形式。