grid布局

基本概念

Grid布局，也叫"网格布局"，提供了带有行和列的基于网格的布局系统，它使网页设计变得更加容易，而无需使用浮动和定位

任何一个容器都可以指定为Grid布局
/* 块级元素 */
.box {
   dispaly: grid;
}
/* 行内元素 */
.box {
    dispaly: inline-grid;
}
当父元素被设为grid布局后，子元素的float、display: inline-block和display: table-cell属性都会失效

采用 Grid 布局的元素，称为 Grid 容器，简称为"容器"，它的所有子元素自动成为容器成员，称为 Grid 项目，简称为"项目"

容器属性

grid-template-columns 定义每一列的列宽

grid-template-rows 定义每一行的行高

.container {
   display: grid;
   /* 例：宽200px，高100px */
   grid-template-columns: 200px 200px 200px;
   grid-template-rows: 100px 100px 100px;
}

repeat() 接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值

.container {
   display: grid;
   grid-template-columns: repeat(3,200px);  /* grid-template-columns: 200px 200px 200px */
   grid-template-rows: repeat(3,200px);  /* grid-template-rows: 200px 200px 200px */
}

.container {
   display: grid;
   grid-template-columns: repeat(3,200px 100px);  /* 六列 */
   /* grid-template-columns: 200px 100px 200px 100px 200px 100px */ 
}

auto-fill 自动填充换行，让一行（或者一列）中尽可能的容纳更多的单元格

只需要确定列宽或者行高，而不用管有多少列
.container {
   display: grid;
   grid-template-columns: repeat(auto-fill,200px);
   grid-template-rows: repeat(3,200px);
}

fr 代表网格容器中可用空间的一等份

.container {
   display: grid;
   /* 第一列、第二列和第三列自动铺满整个容器，且三列等宽 */
   grid-template-columns: 1fr 1fr 1fr ;
   grid-template-rows: repeat(3,200px)
}

与px等绝对长度联用

.container {
   display: grid;
   /* 第一列为200px，第二列和第三列自动铺满整个容器，且第二列宽度为第三列一半 */
   grid-template-columns: 200px 1fr 2fr ;
   grid-template-rows: repeat(3,200px)
}

minmax() 产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中

.container {
   display: grid;
   /* 第三列的列宽不小于100px，不大于1fr */
   grid-template-columns: 200px 1fr minmax(100px,1fr);
   grid-template-rows: repeat(3,200px)
}

auto 由浏览器自行决定长度，尽可能的会占满剩余空间

.container {
   display: grid;
   /* 第二列的宽度等于可用的最大宽度 */
   grid-template-columns: 200px auto 200px;
   grid-template-rows: repeat(3,200px)
}

网格线 grid-template-columns和grid-template-rows里面，还可以使用方括号指定每一根网格线的名字，方便引用

.container {
   display: grid;
   /* 一个3*3的网格区域，就需要有4条水平线，4条垂直线 */
   grid-template-columns: [c1] 200px [c2] 25% [c3] 200px [c4];
   grid-template-rows: [r1] 200px [r2] 200px [r3] 200px [r4];
}

网格布局允许同一根线有多个名字，比如[fifth-line row-5]

row-gap 设置行与行的间隔（行间距）
column-gap 设置列与列的间隔（列间距）

gap: <row-gap> <column-gap> 合并写法

.container {
   grid-template-columns: repeat(3,200px);
   grid-template-rows: repeat(3,200px);
   row-gap: 10px;
   column-gap: 20px;
   /* 等同于 gap: 10px 20px */
}

grid-template-areas 用于定义区域

.container {
   display: grid;
   grid-template-columns: 100px 100px 100px;
   grid-template-rows: 100px 100px 100px;
   grid-template-areas: 'a b c'
                        'd e f'
                        'g h i';
}
定义9个单元格，然后将其定名为a到i的九个区域
.container {
   display: grid;
   grid-template-columns: 100px 100px 100px;
   grid-template-rows: 100px 100px 100px;
   grid-template-areas: 'header header header'    
			'main main aside'   
			'footer footer footer';
   /* 第一行  header，高100px，宽300px */
   /* 第二行  main，高100px，宽200px  aside，高100px，宽100px*/
   /* 第三行  footer，高100px，宽300px */
}
定义9个单元格，通过合并变为4个区域

区域的命名会影响到网格线，每个区域的起始网格线(上，左)，会自动命名为区域名-start，终止网格线（下、右）自动命名为区域名-end

grid-auto-flow 改变放置顺序

row 先行后列（即从左到右放置，铺满一行后换行）【默认】

column 先列后行（即从上到下放置，铺满一列后换列）

row dense 某些项目指定位置以后，剩下的项目怎么自动补齐空位

column dense 某些项目指定位置以后，剩下的项目怎么自动补齐空位
justify-items 设置所有单元格内容的水平位置

start 对齐单元格的最左边

end 对齐单元格的最右边

center 单元格内部居中

stretch 拉伸，占满单元格的整个宽度【默认值】
align-item 设置所有单元格内容的垂直位置

start 对齐单元格的最上边

end 对齐单元格的最下边

center 单元格内部居中

stretch 拉伸，占满单元格的整个宽度【默认值】
place-items align-items和justify-items的合并形式

place-items: ;

例： place-items: start end;

如果省略第二个值，则默认与第一个值相等
justify-content 设置整个内容区域在容器里面的水平位置

start 对齐单元格的最左边

end 对齐单元格的最右边

center 单元格内部居中

stretch 拉伸，占满单元格的整个宽度【默认值】

space-around 均匀对齐，每个项目两侧都等距，所以项目之间的间距比项目与边框之间的大一倍

space-between 两端对齐，两端项目居最上最下，中间项目等距分布

space-evenly 均匀对齐，每个项目两侧都等距，并且与项目到边框之间的距离也相等
align-content 设置整个内容区域在容器里面的垂直位置

start 对齐单元格的最上边

end 对齐单元格的最下边

center 单元格内部居中

stretch 拉伸，占满单元格的整个宽度【默认值】

space-around 均匀对齐，每个项目两侧都等距，所以项目之间的间距比项目与边框之间的大一倍

space-between 两端对齐，两端项目居最上最下，中间项目等距分布

space-evenly 均匀对齐，每个项目两侧都等距，并且与项目到边框之间的距离也相等
grid-auto-columns 定义隐式网格的宽度
grid-auto-rows 定义隐式网格的高度
```
.container {
   display: grid;
   grid-template-columns: 200px 200px 200px 200px;
   grid-template-rows: 200px 200px;
   gap: 10px 10px;grid-auto-rows: 50px;
}
```
例如上面设置了一个4*2的网格，但是一共放置了9个项目，则可以通过grid-auto-rows: 50px设置了第九个网格高度为50px

项目属性

grid-column-start 左边框所在的垂直网格线
grid-column-end 右边框所在的垂直网格线
grid-row-start 上边框所在的水平网格线

grid-row-end 下边框所在的水平网格线

.container {
   display: grid;
   grid-template-columns: 200px [def] 200px 200px [abc];
   grid-template-rows: 200px 200px 200px;
   gap: 10px 10px;
   }
.item1 {
   /* 第2条竖边开始，第4条竖边结束 */
   grid-column-start: 2;
   grid-column-end: 4;
   /* 也可以使用网格线的名字 */
   /* grid-column-start: def; */
   /* grid-column-end: abc; */
}
.item2 {
   /* 第1条竖边开始，第3条竖边结束 */	
   grid-column-start: 1;	
   grid-column-end: 3;
   /* 第2条横边开始，第4条横边结束 */	
   grid-row-start: 2;	
   grid-row-end: 4;
}
.item3 {
   /* span X 横跨X个网格 */
   grid-column-end: span 2;  /* 等同于 grid-column-start: span 2; */
}

grid-column grid-column-start和grid-column-end的合并形式

grid-row grid-row-start和grid-row-end的合并形式

grid-column: / ;
grid-row: / ;

.item1 {
   grid-column: 1 / 3;
   grid-row: 1 / 2;
}
/* 等同于 */
.item1 {
   grid-column: 1 / span 2;
   grid-row: 1 / 2;
}
/* 等同于 */
.item1 {
   grid-column-start: 1;
   grid-column-end: 3;
   grid-row-start: 1;
   grid-row-end: 2;
}

斜杠以及后面的部分可以省略，默认宽度一个网格

.item1 {
   /* item1位于第二列第三行 */
   grid-column: 2;
   grid-row: 3;
}

grid-area 指定项目放在哪一个区域

与grid-template-areas联用

.container {
   display: grid;
   grid-template-columns: 100px 100px 100px;
   grid-template-rows: 100px 100px 100px;
   grid-template-areas: 'a b c'
                   	 'd e f'
                   	 'g h f';
}
.item1 {
   /* item1位于第三列跨第二三行 */
   grid-area: f;
}

与grid-row-start、grid-column-start、grid-row-end、grid-column-end联用

grid-area: / / / ;

.item-1 {   
   /* 第1条横边开始，第3条横边结束 */ 	
   /* 第2条竖边开始，第4条竖边结束 */ 	
   grid-area: 1 / 2 / 3 / 4;
}

justify-self 设置指定单元格内容的水平位置

start 对齐单元格的最左边

end 对齐单元格的最右边

center 单元格内部居中

stretch 拉伸，占满单元格的整个宽度【默认值】
align-self 设置指定单元格内容的垂直位置

start 对齐单元格的最上边

end 对齐单元格的最下边

center 单元格内部居中

stretch 拉伸，占满单元格的整个宽度【默认值】
place-self align-self和justify-self的合并形式

place-self: ;

例：place-self: center center;

如果省略第二个值，则默认与第一个值相等

posted @ 2022-03-21 23:00 伏月廿柒阅读(138) 评论(0) 收藏举报

刷新页面返回顶部

伏月廿柒

grid布局

基本概念

容器属性

项目属性

公告