Grid布局学习笔记

前言

与flexbox最大的区别是，flex是1维，grid是2维；

1 准备工作

<!DOCTYPE html>
<html lang="zh_CN">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="index.css" />
<title>Grid</title>
</head>

<body>
    <div id="ruler"></div>
    <div id="grid-container"></div>
</body>

</html>

body {
  /* 设置40px是为了ruler容器的背景图位置匹配 */
  margin: 40px;
}
#grid-container {
  display: grid;
  width: 500px;
  height: 500px;
  background-color: #eee;
}
#ruler {
  position: absolute;
  top: 0;
  left: 0;
  width: 580px;
  height: 580px;
  background-image: url(https://codingstartup.com/assets/grid/grid-ruler.png);
  background-size: 580px 580px;
}

2 定义grid容器

/* grid容器 */
#grid-container {
  display: grid;
  width: 500px;
  height: 500px;
  background-color: #eee;
  /* 垂直方向上会划出5个高度100px的行 */
  grid-template-rows: 100px 100px 100px 100px 100px;
  /* 水平方向上会划出5个宽度100px的列 */
  grid-template-columns: 100px 100px 100px 100px 100px;
}

3 写法一，格子占据从第几到第几

在grid-container中添加两个div元素

    <div id="grid-container">
        <div class="cell-1"></div>
        <div class="cell-2"></div>
    </div>

设定背景色

.cell-1 {
 background-color: blue;
}
.cell-2 {
 background-color: yellow;
}

预设情况下两个元素各占1格
如果要将蓝色占据左上角4格，则⬇️

.cell-1 {
  background-color: blue;
  grid-row: 1 / 3;  
  grid-column: 1 / 3;
}

再将黄色设置为占据左下角4格

.cell-2 {
  background-color: yellow;
  grid-row: 4 / 6;
  grid-column: 1 / 3;
}

grid-area简写(不直观，不推荐)

.cell-1 {
  background-color: blue;
  /* grid-area可看作左上角和右下角的坐标 */
  grid-area: 2 / 3 / 4 / 5;
}

4 写法二，格子从第几开始，延伸多少格子

.cell-1 {
  background-color: blue;
  grid-row: 1 / 3;
  /* 从第1开始到第3 */
  /* grid-column: 1 / 3; */
  /* 从第1开始延伸2格子 */
  grid-column: 1 / span 2;
}

5 命名分割线

水平垂直各6根分割线叫grid-line

更换ruler容器背景图

/* background-image: url(https://codingstartup.com/assets/grid/grid-ruler.png); */
  background-image: url(https://codingstartup.com/assets/grid/grid-ruler-xy.png);

在grid容器上给分割线命名

/* grid容器 */
#grid-container {
  display: grid;
  width: 500px;
  height: 500px;
  background-color: #eee;
  /* 垂直方向上会划出5个高度100px的行 */
  grid-template-rows: [Y1] 100px [Y2] 100px [Y3] 100px [Y4] 100px [Y5] 100px [Y6];
  /* 水平方向上会划出5个宽度100px的列 */
  grid-template-columns: [X1] 100px [X2] 100px [X3] 100px [X4] 100px [X5] 100px [X6];
}

然后便可用命名的分割线分配元素区域

.cell-1 {
  background-color: blue;
  grid-row: Y2 / Y4;
  grid-column: X1 / X6;
}
.cell-2 {
  background-color: yellow;
  grid-row: Y4 / Y6;
  grid-column: X2 / X6;
}

6 直接命名格子

再增加两个元素

    <div id="grid-container">
        <div class="cell-1"></div>
        <div class="cell-2"></div>
        <div class="cell-3"></div>
        <div class="cell-4"></div>
    </div>

设定样式

.cell-3 {
 background-color: orange;
}
.cell-4 {
 background-color: black;
}

改回grid容器背景图

background-image: url(https://codingstartup.com/assets/grid/grid-ruler.png);
  /* background-image: url(https://codingstartup.com/assets/grid/grid-ruler-xy.png); */

命名格子为下图所示

/* grid容器 */
#grid-container {
  display: grid;
  width: 500px;
  height: 500px;
  background-color: #eee;
  /* 垂直方向上会划出5个高度100px的行 */
  grid-template-rows: [Y1] 100px [Y2] 100px [Y3] 100px [Y4] 100px [Y5] 100px [Y6];
  /* 水平方向上会划出5个宽度100px的列 */
  grid-template-columns: [X1] 100px [X2] 100px [X3] 100px [X4] 100px [X5] 100px [X6];
  /* 直接命名格子 */
  grid-template-areas:
    "header header header header header"
    "nav main main main main"
    "nav main main main main"
    "nav main main main main"
    ". footer footer footer .";
}

运用上步命名好的容器

.cell-1 {
  background-color: blue;
  grid-area: header;
}

完成剩下元素的设定

.cell-1 {
  background-color: blue;
  grid-area: header;
}
.cell-2 {
  background-color: yellow;
  grid-area: nav;
}
.cell-3 {
  background-color: orange;
  grid-area: main;
}
.cell-4 {
  background-color: black;
  grid-area: footer;
}

7 设置间距

注释或者删除ruler容器元素

  <!-- <div id="ruler"></div> -->
    <div id="grid-container">
        <div class="cell-1"></div>
        <div class="cell-2"></div>
        <div class="cell-3"></div>
        <div class="cell-4"></div>
    </div>

修改grid-container容器样式

/* grid容器 */
#grid-container {
   ...省略
  /* 行之间的间距 */
  row-gap: 10px;
  /* 列之间的间距 */
  column-gap: 20px;
}

修改grid-container宽高

#grid-container {
  display: grid;
  width: 580px;
  height: 540px;
  ...省略

8 fr和repeat

fr是比例单位，1个fr占据1份；

  /* grid-template-rows: 100px 100px 100px 100px 100px; */
  /* 每个格子各占1/5 */
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;

repeat是重复,但注意不能用在grid-template-areas属性上

  /* 第一行占据3/7grid容器内容高度,repeat(重复次数,要重复的内容) */
  grid-template-rows: 3fr repeat(4, 1fr);

参考资料

B站Steven老师的视频课程 --> Grid 网页布局完全解构