grid 布局基本使用

父元素设置为 grid 容器

display: grid;

grid-template-rows

下图是设置父容器前3行的高度为 100px，如果有多出来的行数，则根据父容器剩余高度平均分配。

/**
设置前三行的网格高度为 100px。如果有多出来行，根据父容器平均分配剩余空间。
**/
grid-template-rows: 100px 100px 100px;

/**
设置第一行网格高度为 100px，第二行网格高度为 200px
**/
grid-template-rows: 100px 200px

/**
还可以设置 百分比，根据父级容器给给每个行的元素分配 高度
**/
grid-template-rows: 40% 60%;

/**
repeat 函数
	参数1：重复的次数
	参数2：重复的值
比如：grid-template-rows：100px 100px 100px 100px 100px; 可通过repeat 简写
**/
grid-template-rows: repeat(5, 100px)

/**
自适应 auto
	第一行元素高度为100px
	第二行元素高度根据父级元素自适应
	第三行元素高度为100px
**/
grid-template-rows: 100px auto 100px;

/**
 fr 单位 类似于 flex 布局中的 flex: 1
 以下css代码 可以理解为：
 	第一行的高度为 1/6 父元素高度
 	第二行的高度为 2/6 父元素高度
 	第三行的高度为 3/6 父元素高度
**/
grid-template-rows: 1fr 2fr 3fr;

/**
minmax
	参数1：最小值
	参数2：最大值
下方表示：
	第一行高度100px
	第二行高度100px
	第三行高度 100px ~ 200px 之间，根据父元素的高度来决定，最大值 200px， 最小值是 100px
**/
grid-template-rows: 100px 100px minmax(100px, 200px)

grid-template-columns

下图是设置父容器前3列的宽度为 100px。

1. 设置一行有3个元素，并且这3个元素宽度一样。

grid-template-columns: 1fr 1fr 1fr;

2. 设置一行有3个元素，并且第2个元素 固定 200px，其他元素平均分配剩余空间。

grid-template-columns: 1fr 200px 1fr;

3. 设置一行有3个元素，并且第2个元素的宽度为其他元素的 2 倍。以下可以理解为 一行 4 等分，第二个元素占 2 份，其他元素各占 1 份

grid-template-columns: 1fr 2fr 1fr;

4. repeat

/** 这里表示重复 5个 1fr  **/
grid-template-colmns: repeat(5, 1fr)

5. 响应式布局

/**
minmax: 
	arg1: 最小宽度
	arg2: 最大宽度
**/
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr))

6. 划分 3 * 3 的九宫格，每个格子的 width为 100px， height 为 100px

/**
 设置容器有三行
**/
grid-template-columns: 100px 100px 100px;

/**
设置容器有三列
**/
grid-template-rows: 100px 100px 100px;

/**
三行和三列交叉起来，就有了 3 * 3 的九宫格
**/

grid-row-gap

行间距属性

grid-row-gap: 30px;

grid-column-gap

列间距属性

grid-column-gap: 30px;

grid-gap/gap

复合属性等于 grid-row-gap 和 grid-column-gap之和

/**
写法一
**/
grid-gap: 30px;

/**
写法二
	参数1：行间距
	参数2：列间距 
**/
grid-gap: 20px 30px;

grid-auto-flow

设置子元素的排序，默认是从左到右,横向显示

/**
	row: 横向显示
	column: 纵向显示
**/

grid-auto-flow: column;

justify-items

子元素的水平方向对齐方式

/**
	start 左边
	end 右边
	center 居中
**/
justify-items: center;

align-items

子元素垂直方向对齐方式

/**
	start 左边
	end 右边
	center 居中
**/
align-items: center;

place-items

子元素水平垂直方向对齐的复合属性

/**
   place-items:  垂直方向  水平方向
**/
place-items: center start;

justify-content

整体内容的水平对齐方式，把所有网格作为一个整体

/**
	start 左边
	end 右边
	center 居中
**/
justify-content:  center;

align-content

整体内容的垂直对齐方式，把所有网格作为一个整体

/**
	start 左边
	end 右边
	center 居中
**/
align-content:  center;

place-content

align-content justify-content 的 复合属性

/**
place-content: align-content justify-content
**/
placce-content: end end;

grid-row (子元素)

子元素的竖向占比：

语法：

/**
grid-row-start：哪列开始显示
grid-row-end：哪列之前结束
**/
grid-row: grid-row-start / grid-row-end;

给第一个子元素单独添加如下类：

.item1 {
	grid-row: 1 / 3;
}

效果如下图所示：第一个子元素竖列占了两个格子。 1 / 3 可以理解为 元素竖向的 范围，从第1 个格子开始算，到第2个格子结束。

grid-column （子元素）

子元素的横向占比：

语法

.item1 {
	/**
		grid-column-start：哪行开始显示
		grid-column-end：哪行之前结束
	**/
   grid-column: grid-column-start / grid-column-end;
}

给第一个子元素单独添加如下类：

.item1 {
	grid-colimn: 1 / 3;
}

效果如下图所示：第一个子元素一行占了两个格子。 1 / 3 可以理解为元素横向的范围，从第1 个格子开始算，到第2个格子结束。

案例

1. 案例一

html 代码

  <div class="main">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>

css 代码

    .main {
      width: 400px;
      border: 1px solid red;
      height: 400px;
      display: grid;
      grid-template-rows: 70px 70px 70px;
      grid-template-columns: 70px 70px 70px;
      gap: 10px;
    }

    .item {
      background-color: skyblue;
    }

结果如下图所示：每个子元素都是 70px * 70px 的正方形，并且每个正方形的间隔都是 20px。
关注 css 属性：
grid-template-rows: 70px 70px 70px;
grid-template-columns: 70px 70px 70px;
gap: 10px;

2. 案例二
   html代码

<div class="main">
  <div class="item item1 ">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
  <div class="item">16</div>
</div>

css 代码

.main {
  width: 300px;
  border: 1px solid red;
  height: 300px;
  display: grid;
  grid-template-rows: repeat(5, 40px);
  grid-template-columns: repeat(5, 40px);
  gap: 10px;
}

.item {
  background-color: skyblue;
}

.item1 {
   /*这里表示元素的高度，1 / 3 可以理解为高度为第一行和第二行的高度和，但是不包含第三行 */
  grid-row: 1 / 3;
}

如果下图所示：第一个元素添加 item1 类，所以第一个元素的高度为两行网格高度之和。

接着给 item1类添加 grid-column: 1 / 3 ，表示该元素的宽度跨越两个网格，从左边第一个开始到第三个之前结束，结果如下图所示：

如果想实现 12 元素的布局，可通过给任意元素添加 item2 类

.item2 {
  grid-row: 3 / 5;
  grid-column: 4 / 6;
}

计算方式：
根据 grid-template-columns 可以计算出该容器每行有 5 个网格。
高：第三行和第四行合并，grid-row: 3 / 5。
宽：第四列和第五列合并，grid-column: 4 / 6。