前语

• 目前为止，我经常在开发中运用的布局方法有以下几种：
  • Flex布局；
  • 定位；
  • 起浮（基本不怎样运用）；
• 最近在做一个项目的时分，运用到了网格布局，真的是便利了许多；
  • 我学习Grtid布局是阅览的这位大佬的文章 Gopal ===> 最强大的 CSS 布局 —— Grid 布局，这篇笔记也是参阅他的写的；
• 下面就来一同瞅瞅最强布局方法吧！
• 最近在项目中也是有运用到，有些时分是真的好用啊；

一、Grid布局介绍

1.1 Grid布局是什么？

• 概念：
  • Grid布局即网格布局，相信我们多多少少都是听说过的，它是一种新的CSS布局模型，主要作用是将一个页面或元素区分为几个区域，以及界说这些区域的大小、方位、层次等联系；
  • 它将一个页面或元素区分为一个个的网格，能够恣意组合不同的网格，做出各式各样的布局；
  • Grid布局是目前唯一一种 CSS二维布局 计划，他将一个元素区分为 行 和 列；

1.2 Grid布局的优缺陷

• 长处：
  • 更灵敏的排版方法：
    • Grid 布局能够对网页进行更加灵敏的布局规划，允许多列和多行的布局，且支持在不同列和行的穿插方位进行对齐；
  • 简化HTML结构：
    • 相比传统的布局方法，Grid布局能够减少HTML结构中的 div 和 class 的运用；
  • 更简略实现响应式布局：
    • Grid布局基于强大的网格体系规划，支持自适应布局与媒体查询；
  • 能够将多个项目放入网格单元格或区域中，它们能够互相部分堆叠。然后能够用z-index特点操控该分层；
• 缺陷：
  • 特点较多，难回忆；
  • 兼容性略差；

  • 

1.3 Gird布局 和 Flex布局 的差异和运用场景

1.3.1 Flex布局

• 一维布局方法；
  • 布局一次只能处理一个维度上的元素布局【一行或一列】；
• 适用于局部布局方法；

• 

1.3.2 Griud布局

• 二维布局方法；
  • Grid布局是将容器区分为了 “行” 和 “列”，产生了一个个的网格，咱们能够将网格元素放在与这些行和列相关的方位上，然后达到咱们的目的，实现咱们需求的作用；
• 一般用于整个页面的规划；
• Grid布局 远比 Flex布局 要强大；

1.3.3总结

• Grid布局 与 Flex布局有必定的相似性，都能够指定容器内部多个元素的方位；可是，它们也存在重大差异；
• ❗ Grid布局 能够做 Flex布局做不了的事，Flex布局 比 Grid布局 兼容性要好，它们能够共同工作。Grid Item 能够做为 FlexBox 的容器，Flex Item 也能够作为 Grid容器；
• 综上所述，能够依据业务场景需求挑选相应的布局方法；

1.4 Grid布局要害词的基本概念

1.4.1 基本演示

• 在线代码演示

  <!-- 网格容器 -->
  <div class="grid-container">
    <!-- 网格元素 -->
    <div class="grid-item one">One</div>
    <div class="grid-item two">Two</div>
    <div class="grid-item three">Three</div>
    <div class="grid-item four">Four</div>
    <div class="grid-item five">Five</div>
    <div class="grid-item six">Six</div>
  </div>
  

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    padding: 50px;
  }
  .grid-container {
    display: grid; /* 声明一个Grid容器 */
    grid-template-columns: repeat(3, 200px); /* 声明列数和每列的宽度，3列，每一列宽度为 200px */
    /* grid-gap: 20px 20px; 该行代码等同于下面这行代码 */
    gap: 20px; /* 声明行距离和列距离 */
    grid-template-rows: 100px 200px; /* 声明行的高度 - 榜首行100px，第二行200px，两行之外的行会将剩余高度均分 */
    width: fit-content; /* 元素的宽度为由内容的宽度撑开 */
    border: 2px solid red;
    border-radius: 4px;
    background-color: #eee;
  }
  .one {
    background: #18dfbe;
  }
  .two {
    background: #ff49f8;
  }
  .three {
    background: #0bc530;
  }
  .four {
    background: #38d1d8;
  }
  .five {
    background: #edbf7e;
  }
  .six {
    background: #551ccE;
  }
  .grid-item {
    text-align: center;
    font-size: 200%;
    color: #fff;
  }
  

1.4.2 网格容器 和 网格项目

• 经过在 元素上声明 display: grid / inline-grid; 来创立一个 网格容器；
• 一旦这样做了，这个元素的所有 直系子元素（亲子元素） 将成为 网格项目;
• 依照上面的列子来说，.grid-container所在的元素为一个网格容器，其直系子元素将成为网格项目；

1.4.3 网格轨迹

• 网格轨迹分为两部分：行 和 列；
• grid-template-columns 特点来界说网格中的 列，容器内部 笔直区域 称之为 列；
• grid-template-rows 特点界说网格中的 行，容器内部 水平区域 称之为 行；
• 这些特点界说了网格的轨迹，一个网格轨迹便是网格中恣意两条线之间的空间；

• 

1.4.4 网格单元（网格项目）

• 一个网格单元是在一个网格元素中最小的单位，上图中的六个元素都是一个个的网格单元；

1.4.5 网格线

• 区分网格的线称之为“网格线”。
• 需求留意的是，当咱们界说网格时，咱们界说的是网格轨迹，而不是网格线；
• Grid会为咱们创立编号的网格线来让咱们定位每一个网格元素。m列有m+1根笔直网格线，n行有n+1根水平网格线。依照本例来说，有4根笔直网格线，3根水平网格线；
• 网格线的编号次序：
  • 一般来说，是从左到右，从上到下，1， 2， 3, ……顺次 递加 进行编号（左面 和 上边）；
  • 当然也能够从右到左，从下到上进行编号，依照-1， -2， -3， ……顺次 递减 的次序编号（右边 和 下边）；

• 

• 浏览器中如何检查网格线？
  • F12 翻开操控面板，咱们找到网格容器，点击 grid 即可看到；

  • 

二、网格容器特点介绍

• 开端介绍特点之前，需求对上述事例代码进行一点改造；需求给grid-container设置宽高为800px 600px，并且对每个 grid-item 增加边框border: 2px dashed #333;，便利咱们检查作用；
• Grid布局相关的特点以及特点值比较多，为了便利回忆，能够自己着手敲一敲（我也会在某个特点的介绍中做个小事例，便利了解）；

2.1 display

• 咱们经过在元素上增加 display: grid / inline-grid; 来创立一个网格容器。
• 在线代码演示
  • 两种特点值的差异：
    • grid：
      • 块级元素；

        

    • inline-grid：
      • 行内元素；

        

2.2 设置 列宽 和 行高（grid-template-columns + grid-template-rows）

• grid-template-columns 特点 设置 列宽；
• grid-template-rows 特点 设置 行高；

2.2.1 固定的列宽和行高

• 在线代码演示

  /* 固定 的 列宽 和 行高 */
  .grid-container {
    /* 声明晰三列，榜首列的宽度：300px；第二列的宽度：200px；第三列的宽度：300px */
    grid-template-columns: 200px 200px 300px;
    /* 声明晰两行，榜首行的高度：200px；第二行的高度是：150px */
    grid-template-rows: 150px 150px;
  }
  

2.2.2 简化重复的值 – repeat()

• 能够简化重复的值；
• 该函数接纳两个值：
  • 榜首个值：重复的次数
  • 第二个值：重复的值
• 在线代码演示
• 上面的代码等同于下面这段代码:

  .grid-container {
    /* 声明晰三列，榜首列的宽度：300px；第二列的宽度：200px；第三列的宽度：300px */
    grid-template-columns: repeat(2, 200px) 300px;
    /* 声明晰两行，高度相同，运用 repeat() 进行简化 */
    grid-template-rows: repeat(2, 150px);
  }
  

2.2.3 主动填充 – （auto-fill）

• auto-fill的前身是auto-fit，auto-fit特点已弃用（也能收效）；
• 表明主动填充，让一行或一列中尽或许容纳更多的单元格;
  • 当时这一行的列数不固定（看当时浏览器可视窗口的宽度能放多少个列宽的项目） 或许 这一列的行数不固定；
• 留意：
  • 测验的时分，不要将网格容器的宽度写死，这样改动浏览器可视化窗口的时分的能看到作用；
• 在线代码演示

  grid-template-columns: repeat(auto-fill, 150px);
  /* 这行代码表明，当时这一行的列数不固定（看当时浏览器可视窗口能放多少个150px宽的项目），每列的宽度为150px */
  

• 

2.2.4 fr要害字

• Grid布局还引入了一个另外的长度单位来帮助咱们创立灵敏的网格轨迹。fr单位代表网格容器中可用空间的几等份；
• fr要害 和 flex要害字极为相似，都是将剩余部进行均分；
  • 如何均分？
    • 拿到剩余部分，看当时网格容器写了几个fr，就表明均为多少分，依据fr的数值进行区分；
• 在线代码演示

• 

  • 浏览器可视化窗口宽度最小的时分，2、3；4、5不改动大小是因为里边有内容；

2.2.5 minmax() 函数

• 咱们有时分想给网格元素一个最大宽度和最小宽度，minmax()函数产生一个长度规模，表明长度在这个规模之中都能够应用到网格项目中；
• 它接纳两个参数：
  • 榜首个参数：最小值；
  • 第二个参数：最大值；
• 在线代码演示

2.2.6 宽度或高度自适应 – auto要害字

• 经过 auto要害字，咱们能够轻松实现两列乃至更多列的布局（其间的一列或某几列宽度固定不变，其他的列宽度随着屏幕的宽度自适应）；
  • 一般在做一些电商网站或许政府网站的时分，能够运用auto（这种状况能够运用，可是不推荐，政府的网站有时分或许会在低版别浏览器上运转，Grid布局对浏览器的版别要求又比较高，我电脑上的69版的谷歌运转起来是没有问题）；
• 在线代码演示

2.3 设置 行距离 和 列距离（gap + row-gap + column-gap）

• ❗❗ 留意：
  • 写复合特点的时分，column-gap特点是可选的，假如该特点缺失的话，则会被设置成与 row-gap 相同的值

• 在线代码演示

  /* row-gap: 30px; */
  /* column-gap: 60px; */
  /* 上面的代码等同于下面这行代码 */
  gap: 30px 100px; /* 行距离， 列距离 */
  

• 

2.4 ❌ 界说区域（grid-template-areas）

• 不推荐运用该特点，要运用该特点就有必要和项目特点grid-area结合运用；
  • 结合运用的话，有必要要运用grid-area特点给每个项目进行命名，假如项目比较少还能够，项目很多的话，真的是很头疼；
  • 并且要运用该特点界说网格区域的话，有必要要确保网格区块是个矩形，真的是很烦人；
• 而grid-area特点能够单独运用，并且单独运用的性价比要比这两种特点结合运用的性价比高得多，咱们也便利； grid-rear特点的具体运用请看 三、网格项目特点介绍 – 3.2；

• grid-template-areas特点用来 界说区域，一个区域 由 一个 或许 多个单元格 组成；
• 一般这个特点跟 网格元素 的 grid-area 特点一同运用：
  • grid-area特点指定项目放在哪一个区域；
• ❗ 留意：
  • 每一个给定的字符串会生成一行，一个字符串顶用空格分隔的每一个单元格会生成一列；
  • 多个同名的，跨过相邻行或列的单元格 称为 网格区块；
  • 非矩形 的 网格区块 是 无效的；
  • .（空单元格）只能呈现在该行的首和尾，不能呈现在中间；
    • 因为，放在中间组成的网格区块是无效的；

      

• 在线代码演示

.grid-container {
  /* 声明三行三列 */
  /* . 表明当时单元格为空 */
  grid-template-areas: ". head head" "left right right" "left right right";
  /* 声明3列 */
  /* 榜首列：列宽为 100px */
  /* 第二列 和 第三列 列宽持平为： 200px */
  grid-template-columns: 100px repeat(2, 200px);
  /* 声明三行，每行的行高为100px */
  grid-template-rows: repeat(3, 100px);
  /* 行距离和列距离为 4px */
  grid-gap: 4px;
  /* 容器宽度由内容撑开 */
  width: fit-content;
}

/* 将class为 .one 的元素放在 head区域 */
.one {
  grid-area: head;
}
/* 将class为 .two 的元素放在 left区域 */
.two {
  grid-area: left;
}
/* 将class为 .three 的元素放在 right区域 */
.three {
  grid-area: right;
}

2.5 元素摆放方法（grid-auto-flow）

• 该特点操控着主动布局算法怎样运作，精确指定在网格中被主动布局的元素怎样摆放；
• 默认的放置次序是“先行后列”，即先填满榜首行，再开端放入第二行，假如某个项目（单元格）的宽度太大，在当时行现已放不下了，就会抛弃当时行，主动填入到下一行；

• 在线代码演示

  /* 网格容器 */
  .grid-container {
    grid-auto-flow: row; /* 网格项目的摆放方法 - 默认值 - row */
  }
  

• 

2.6 设置网格在容器中的方位（justify-content + align-content）

• justify-content：
  • 该特点用于对齐容器内的网格，设置如何分配顺着弹性容器主轴（或许网格行轴）的元素之间及其周围的空间；
  • 简略来说便是依据 网格行轴 设置 网格方位 以及 列距离；
• align-center：
  • 该特点用于设置 笔直方向 上的 网格元素 在容器中的 对齐方法；
  • 简略来说便是依据 网格列轴 设置 网格方位 及其 行距离；
• ❗❗ 留意：
  • 网格的总宽度 有必要小于 容器的宽度 才能使 justify-content 特点收效；
  • 网格元素的总高度 有必要小于 容器的高度 才能使 align-content 特点收效；
  • justify-content 与 align-content 的特点值是相同的；

特点值	描绘（阐明）	作用展现
start	放在开端方位
end	放在完毕方位
space-between	榜首列（榜首行）放在开端方位，最终一列（最终一行）放在完毕方位，列（行）距离持平
space-around	列（行）两边的距离持平
space-evenly	列（行）距离与两边空白持平

2.7 设置网格内容在网格中的方位（justify-items + align-items）

• 留意：
  • 该特点会改动网格元素的大小；

特点值	描绘（阐明）	作用展现
start	对齐单元格的开始边际（靠左 或 靠上 对齐）
end	对齐单元格的完毕边际（靠右 或 靠下对齐）
center	单元格居中
stretch	拉伸，默认值，占满单元格的整个宽度或高度

2.8 设置隐式网格的列宽和行高（grid-auto-columns + grid-auto-rows）

• 我们能够结合示例看着更明晰；
• 显现网格：
  • 便是咱们运用 grid-template-columns 和 grid-template-rows 特点中界说的行和列；
  • 简略来说，便是咱们运用这两个特点界说了一个容器，是三行三列，这三行三列便是显现网格；
• 隐式网格：
  • 假如你在网格之外又放置了一些元素，或许是因为内容的数量改动而导致需求更多的网格轨迹的时分，网格将会在隐式网格中创立行和列；
  • 简略来说，所谓的隐式网格便是超出咱们规定队伍之外的网格；
  • 就比假如说，我界说了一个三行三列的容器，容器里边放置了九个项目，我能够经过grid-auto特点设置其间的某几个项目跨行跨列显现（前提是行高设置的不是auto），这就会导致有些项目在当时这个容器中是没有方位放置的，会超出容器，显现在外边，咱们将显现在外边的这些网格称为隐式网格；假如设置的行高为auto，他虽然不会超出容器，可是会改动网格轨迹的数量，这也归于隐式网格；
• 当有隐式网格呈现的时分，就有新的问题，咱们怎样给这些新呈现的网格（隐式网格）设置列宽和行高呢？
  • 咱们能够运用 grid-auto-columns 和 grid-auto-rows 设置隐式网格的列宽和行高；
• 在线代码演示
• ❗❗ 留意：
  • 假如是 新增列；
    • 行高 是依据 grid-template-rows 指定的行高；
    • 列宽 是依据 grid-auto-column 指定的列宽，若没有指定，则是由 由内容撑开（内容的宽度）；

    • 

  • 假如是 新增行；
    • 列宽 是依据 grid-template-columns 指定的列宽；
    • 行高 是依据 grid-auto-row 指定的行高，若没有指定，则是由 由内容撑开（内容的高度）；

    • 

• 翻开上面的在线代码，我们能够在 style 里边修改行高，看看行高定死和行高为auto的差异；
  • 行高固定：
    • 或许会呈现新行（列同理）；

    • 

  • 行高自适应：
    • 会压缩现有项目的行高（列同理）；

    • 

三、网格项目特点介绍

3.1 ❌ 定位项目的方位（grid-column-start、grid-colmun-end、grid-row-start、grid-row-end）

• 留意：
  • 平时应该很少运用这些特点；
  • 运用 复合特点 grid-area进行替代（请看 3.2）；
• 作用：
  • 指定网格项目所在的四个边框，分别定位在哪根网格线，然后指定项目的方位；

• 特点值介绍：

• grid-row-start、grid-row-end 特点值介绍

• grid-column-start、grid-column-end 特点值介绍

• 此处的代码演示请看下节；

3.2 ✅ 定位项目方位（grid-area）

• 在说 网格容器的 grid-template-areas特点 的时分提过一嘴 grid-area特点，该特点能够 为网格元素 设置称号；
• 除了能够给网格元素设置称号之外，还能够设置从哪根网格线开端显现元素，到哪根网格线中止显现元素；

• 该特点也能够单独运用；
• 该特点是 3.1 小结中四个特点的复合特点；

• 语法：

  • grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

• 在线代码演示

  /* 指定 two项目 的方位 */
  /* 从榜首根行网格线开端 */
  /* 从第二根列网格线开端 */
  /* 从第二根行网格线完毕 */
  /* 从第四根列网格线完毕 */
  .two {
    grid-area: 1 / 2 / 2 / 4;
  }
  /* 指定 four项目 的方位 */
  /* 从第二根行网格线开端 */
  /* 从第二根列网格线开端 */
  /* 从第四根行网格线完毕 */
  /* 从第三根列网格线完毕 */
  .four {
    grid-row-start: 2;
    grid-column-start: 2;
    grid-row-end: 4;
    grid-column-end: 3;
  }
  

• 

3.3 justify-self、align-self、place-self

• justify-self 特点设置单元格内容的水平方位（左中右），与 justify-items特点的用法完全一致，但只作用于单个项目；
• align-self 特点设置单元格内容的笔直方位（上中下），与 align-items特点的用法完全一致，但只作用于单个项目；
• place-self特点 是 上述两个特点的复合特点 先 justify-self 后 align-self；
• 上述特点的特点值是相同的：start(对齐单元格的开始边际) | center(居中) | end(对齐单元格的完毕边际) |stretch(默认值，拉伸，占满整个单元格)；

四、总结

• grid布局也不必定是要学习的，flex布局也很便利，运用网格布局的话，还要考虑一些浏览器的兼容，可是学了，会了肯定是要比他人强一点点的好吧，一个字便是干；
• 假如想要设置网格项目里边内容的对齐方法，我自己更喜欢将网格项目界说为弹性容器，两种布局方法结合运用，运用flex更加随手；
• 后续有时间了，会补充一点网格布局相关的代码（小demo）；