网格布局

时间：2020-04-16 20:48:20 阅读：65 评论：0 收藏：0 [点我收藏+]

grid布局：针对的是子元素布局。

1：形成一个网格结构(父元素添加)：

display:grid;

2: 划分行和列

grid-template-columns:

grid-template-rows:

补：如果是3个值代表3行或3列能接受具体的px 也能是百分比

3:划分行和列的时候的关键字和方法:

a: repeat(重复的次数,重复的值)

b: auto-fill关键字( 自动填充 )

c: fr关键字(列宽片段)

d: minmax(最小值,最大值)

4: grid-row-gap:20px 行间距

grid-column-gap:20px 列间距

grid-gap:20px 30px; 简写形式

5: 指定某个项目所在的区域:

grid-template-areas:

‘a a a‘

‘. . b‘

‘. c c‘;

注: grid-template-areas 必须和 grid-area共同使用

grid-area放在具体某个项目里面的,指定项目名称.

6:指定顺序:

grid-auto-flow:row/column

7: 内容在项目里面的对齐方式:

③place-items:

注: 网格内部的内容固定的大小百分比的时候左右的对齐方式会产生BUG

8：

③place-content:; 控制整个网格在父元素里面的对齐方式.

9：指定项目的四个边框，分别定位在哪根网格线。

grid-column属性是grid-column-start和grid-column-end的合并简写形式
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

原文：https://www.cnblogs.com/yh-3175339026/p/12715085.html

踩

(0)

评论一句话评论（0）

分享档案

更多>