一、grid网格布局

不同于传统的布局采用positon+display+float、felx一维布局，grid是有行和列的二维布局。
首先指定一个容器，然后在容器中划分行列形成“单元格”或者网格，最后把“项目”放置到相应的网格中。
grid: 默认每个项目都是”块级”, 垂直排列
flex: 默认每个项目都是”行内块级”, 水平排列

二、容器属性

1. grid-template-columns

grid-template-columns:100px 200px 300px ; 
// 显示3列，分别为100px 200px 300px

grid-template-columns:repeat(3,1fr); 
// repeat()简写，第一参数代表循环的次数，第二个参数代表一次展示的内容，上面代码意思是每一列为1fr(fraction:片段、份数)，分3列。
// fr 不要和 auto 同用
// 1fr minmax(20em,2fr) 2fr; 中间列的宽度最小是 20em,最大和右边的相同,总宽的 2/5
grid-template-columns: repeat(2, 100px 20px 80px);
// 上面代码定义了 6 (重复2次，每次三列 )列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px。

grid-template-columns:100px auto 100px;
// 分成3列，第二列auto由屏幕尺寸自动分配

2. grid-template-rows

grid-template-rows:repeat(2,100px);
// 平均分成2行，每一行100px

grid--template-rows:[r1] 100px [r2] 100px [r3] 100px [r4]
// 网格线自定义命名为r1、r2、r3、r4
// 分成3列，分别为100px 100px 200px

上图中原来的分割线名称由默认的数值已经改变成了自定义的r1\r2\r3\r4

3. grid-template-areas

grid-template-areas 属性用于设置网格布局。
grid-area 属性可以对网格元素进行命名。
命名的网格元素可以通过容器的 grid-template-areas 属性来引用。
每行由单引号内’’定义，以空格分隔。

. 号表示没有名称的网格项。

.container {
          background: #ccc;
          height: 800px;
          color: #fff;
          border: 5px solid black;
          display: grid;
          grid-template-columns: repeat(3,100px);
          // 分为3列
          grid-template-rows: repeat(4,100px); 
          // 分为4行
          grid-template-areas: 'cc cc .';
          // 设置item1即cc区域所占用的列数，前两列为同名，即为同一区域
          // 上述同理，也可继续换行设置其列数
          // 注意：如果写成了 'cc cc . . '总共的列数4大于原设置的3列，则原来所设置的grid-template-columns失效。
          gap: 10px 30px;
      }
      .item1 {
          background: rgb(246, 64, 64);
          grid-area: cc;
          // 自定义item1区域名为:cc
      }

上图为占用2列示例，下图为占用行示例：

4. grid-auto-flow
容器默认设定项目的排列方式为row，即按照一行排，如果满一行则自动下一行，也可以设置为：
column ，

5. place-content
justify-content
align-content
所有项目在“容器”中的对齐方式

5.1 对齐方式

属性	说明
center	居中排列
start	从行首开始排列
end	从行尾开始排列
flex-start	从行首起始位置开始排列
flex-end	从行尾位置开始排列
left	一个挨一个在对齐容器得左边缘
right	元素以容器右边缘为基准，一个挨着一个对齐

5.2 基线对齐

属性
baseline
first baseline
last baseline

5.3 分配弹性元素方式

属性	说明
space-between	均匀排列每个元素,首个元素放置于起点，末尾元素放置于终点，两段对齐
space-around	均匀排列每个元素,每个元素周围分配相同的空间，分散对齐
space-evenly	均匀排列每个元素,每个元素之间的间隔相等
stretch	均匀排列每个元素,’auto’-sized 的元素会被拉伸以适应容器的大小

5.4 溢出对齐方式

属性
safe center
unsafe center

5.5 全局值

属性
inherit
initial

6. place-items
justify-items
align-items
所有项目在“网格单元”中的对齐方式

属性	说明
strech	默认，元素被拉伸以适应容器
center	元素位于容器中心
flex-start	元素位于容器的开头
flex-end	元素位于容器的结尾
initial	默认
inherit	继承

7. grid-auto-columns
默认的列尺寸【同下】

8. grid-auto-rows
理解1：默认的行尺寸，但是会被设定的grid-template-column 、grid-template-row覆盖
理解2：在已设置的列、行范围外的元素尺寸

9. gap
grid-row-gap（新标准为：row-gap）
grid-column-gap（新标准为：column-gap）
grid-gap（新标准为：gap）
gap就是项目item之间的距离，默认为：row-gap , column-gap

gap:10px 30px;
// 行间距10px ，列间距30px

三、项目属性

1. grid-row
是grid-row-start和grid-row-end的简写，
grid-row-start
grid-row-end

2. grid-column
grid-column-start
grid-column-end

3. grid-area
grid-area: 行开始 / 列开始 / 行结束 / 列结束

grid-area: 2 / 2 / span 2 / span 2;
span ：偏移跨越几行几列，直接增加数字更方便

grid网格布局常用属性

一、grid网格布局

二、容器属性

三、项目属性

相关文章