【CSS3】grid 网格布局

网格布局 ( grid 布局 )

  1. 网格容器:网格容器是所有网格项的父元素;eg: 下例中类名为 container 的 div 就是网格容器
  2. 网格项:网格项是网格容器的子元素;eg: 下例中类名为 item 的 div 就是网格项
<style>
.container {
    display: grid;
}
style>

<div class="container">
    <div class="item">网格项 1div>
    <div class="item">网格项 2div>
    <div class="item">网格项 3div>
    <div class="item">网格项 4div>
div>
  1. 网格线:构成网格结构的水平和垂直分割线就是网格线;eg: 下图中有 4 条行网格线和 4 条列网格线
  1. 网格轨道:两条相邻的网格线之间的区域就是网格轨道
  1. 网格单元:两条相邻的列网格线和两条相邻的行网格线围起来的就是网格单元
注意事项
  • 设置 display: grid 后网格项会转换为 block
  • 也可以设置 display: inline-grid,网格项就会转换成 inline-block
  • 默认情况下:
    ① 网格项的宽度默认继承网格容器的 100%
    ② 若网格容器未设置高度,则网格项的高度默认由网格项自己的内容撑开;
    若网格容器已设置高度,则网格项的高度默认平分网格容器的高度
    ③ 设置后子级项目符合怪异盒模型
    floatcolumnclearvertical-align 等设置都对网格项失效



网格项之间的间隙

可以为网格容器设置网格线的宽度,以控制单元格之间的间隙

  1. row-gap - 行网格线的宽度 - 行间隙:
.container {
    display: grid;
    row-gap: 20px;
}
  1. column-gap 列网格线的宽度 - 列间隙:
.container {
    display: grid;
    column-gap: 20px;
}
  1. gap - 复合写法:
gap: 20px 10px; /* 行间隙为 20px; 列间隙为 10px */
gap: 15px; /* 行间隙和列间隙都为 15px */



行高 & 列宽


grid-template-columns

  • grid-template-columns 用于设置网格容器中所需的列数及每列的宽度
1. 设置定值
  • 该属性接收一个或多个非负 CSS 长度值,这些值的个数就是网格容器的列数,每个值表示每列的宽度
  • 宽度之间用空格分开
  • 这些非负 CSS 长度值的单位可以为 px / %
grid-template-columns: 100px 100px 100px;
grid-template-columns: 80% 20%;
2. repeat() 函数
  • 单位:px / %
grid-template-columns: repeat(列数, 每列的长度);
grid-template-columns: repeat(重复的次数, 第1列宽度 第2列宽度);
3. auto-fill 关键字
  • 自动排满父级的宽度 (一般用于父级宽度不确定时)
grid-template-columns: repeat(auto-fill, 每列的宽度);
4. fr 关键字
  • 设置了 fr 的子级按比例分配父级的宽度,可以与绝对长度的单位结合使用
grid-template-columns: 1fr 2fr;
grid-template-columns: 150px 1fr 2fr; /* 第一列为150px,剩余宽度按比例划分 */
5. auto 关键字
grid-template-columns: 100px auto 100px; /* 第二列自适应 */
6. minmax()
grid-template-columns: 1fr 1fr minmax(100px, 1fr); /* 将第三列的宽度控制在 100px~1fr 之间 */
grid-template-columns: 1fr 1fr minmax(100px, auto); /* 设置第三列的宽度 >= 100px */
7. 网格线的名称

该属性可以使用方括号来指定每一条网格线的名字,方便引用

grid-template-columns: [名称1] 第一列宽度 [名称2] 第二列宽度;
布局实例:
grid-template-columns: 70% 30%;
grid-template-columns: repeat(12, 1fr);
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 自适应排列数量 */

grid-template-rows

  • grid-template-rows 用于设置网格容器中每行的高度
  • grid-template-columns 不同,grid-template-rows 没有指定网格容器的行数
  • 可用于 grid-template-rows 的属性值与 grid-template-columns 一样
grid-template-rows: repeat(2, 5px 30px);

上例设置了前 4 行的高度。若网格容器中的网格项有很多,超过了 4 行,则从第 5 行开始,行高为网格项默认高度



项目的对齐方式

网格项的总宽高 < 网格容器的宽高时,可以通过以下属性设置网格项的对齐方式


justify-content

justify-content 用于设置网格项在水平方向上的对齐方式

  1. start:从左往右
  2. end:从右往左
  3. center:居中
  4. stretch(默认):拉伸占据整个网格容器
    如果设置了 width,则与 start 等效
  5. space-between:两端对齐,子元素之间自动留有空隙
  6. space-around:父子元素之间也有空隙,为子元素之间的空隙的一半
  7. space-evenly:父子元素之间的空隙 = 子元素之间的空隙

align-content

align-content 用于设置网格项在垂直方向上的对齐方式

  1. start:从上往下
  2. end:从下往上
  3. center:居中
  4. stretch(默认):拉伸占据整个网格容器
    如果设置了 height,则与 start 等效
  5. space-between:两端对齐,子元素之间自动留有空隙
  6. space-around:父子元素之间也有空隙,为子元素之间的空隙的一半
  7. space-evenly:父子元素之间的空隙 = 子元素之间的空隙

place-content

place-contentjustify-content & align-content 的复合写法:

place-content:  ;



项目内容的对齐方式


justify-items

  • 水平方向:
justify-items: stretch; /* 默认拉伸,占满单元格的宽度 */

设置以下属性后,网格项的内容的宽度由内容撑开

  1. start:对齐单元格的起始边缘
  2. end:对齐单元格的结束边缘
  3. center:单元格内部居中

align-items

  • 垂直方向:
align-items: stretch; /* 默认拉伸,占满单元格的宽度 */

设置以下属性后,项目内容的高度会被压缩至 content 的高度

  1. start:对齐单元格的起始边缘
  2. end:对齐单元格的结束边缘
  3. center:单元格内部居中

place-items

  • justify-items & align-items 的复合写法:
place-items:  ;



单个项目的内容的对齐方式 *

以下属性需要设置在指定的网格项中


justify-self

justify-self 用于设置当前网格项的内容在水平方向上的对齐方式:

  1. start
  2. end
  3. center
  4. stretch (默认)

align-self

align-self 用于设置当前网格项的内容在垂直方向上的对齐方式:

  1. start
  2. end
  3. center
  4. stretch (默认)

place-self

place-selfjustify-self & align-self 的复合写法:

place-self:  ;



项目的位置 & 合并 *

以下属性需要设置在指定网格项上,控制项目的位置以及大小


grid-column

grid-column 用于合并列:

grid-column-start: 网格线的序数 / 网格线的名字; /* 左边框所在的垂直网格线 */
grid-column-end: 网格线的序数 / 网格线的名字; /* 右边框所在的垂直网格线 */
grid-column:  / ; /* 合并写法,第一个数:左边序号;第二个数:右边序号 */

grid-row

grid-row 用于合并行:

grid-row-start: 网格线的序数 / 网格线的名字; /* 上边框所在的水平网格线 */
grid-row-end: 网格线的序数 / 网格线的名字; /* 下边框所在的水平网格线 */
grid-row:  / ; /* 合并写法 */
实例
grid-column: 1 / 3;
grid-row: 1 / 2;
/* 等同于 */
grid-column: 1 / span 2; /* span n 表示跨过 n 格 */
grid-row-start: 1;
grid-row-end: 2;
/* 等同于 */
grid-column: 1 / span 2;
grid-row: 1;

grid-area

grid-areagrid-column & grid-row 的符合写法:

grid-area:  /  /  / ;



定义网格模板


grid-template-areas

该属性需要给网格容器设置,用于定义网格的整体布局

display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'header header header'
                	 'sidebar content content'
               		 'footer footer footer';

如果某些区域不需要利用,则使用 . 表示,表示没有用到该单元格,或者该单元格不属于任何区域

grid-template-areas: 'header . header'
                     'sidebar . content'
                     'footer . footer';

区域的命名会影响到网格线:每个区域的起始网格线,会自动命名为 区域名-start,终止网格线自动命名为 区域名-end


grid-area *

  • 该属性需要给网格项设置,用于定义该网格项的名称
  • 设置了相应名称的网格项会移到网格布局中对应的位置上
grid-area: sidebar;



grid-auto-flow

该属性用于定义网格的排列顺序

  1. row (默认):先行后列
  2. column:先列后行
  3. row dense:先行后列,并且尽可能紧密填满,尽量不出现空格
  4. column dense:先列后行,并且尽可能紧密填满,尽量不出现空格
grid-auto-flow: row;



隐式网格轨道

  • 当我们设置的网格不足以放下所有的网格项时,就会自动出现一些网格轨道
  • 这些网格轨道的高度默认是 auto 的,可以使用 grid-auto-columns grid-auto-rows 来指定网格轨道的大小
.container {
    display: grid;
    grid-auto-columns: 100px;
    grid-auto-rows: 80px;
}

上例就指定了网格轨道的宽度为 100px,高度为 80px

标题后面带 * 号的,表示该属性需要给网格项设置

你可能感兴趣的:(CSS,笔记,css,css3,前端)