前言

FreeCodeCamp是一个以“帮助人们免费学习编程”为主旨的非营利性组织，其网站收录了众多训练式题目。作为前端入门有较大的帮助。

英文版（源）地址：www.freecodecamp.org/

中文社区：chinese.freecodecamp.org/forum/t/top…

此系列博文为相关知识点记录，算是自己对前端入门的一个回顾。有空还是强烈建议去刷一遍原题+知识点

网格

CSS Grid 帮助你轻松实现复杂的 Web 设计。

它通过把 HTML 元素转换为具有行和列的网格容器，以便将子元素放置在所需要的位置。

• 通过将属性display的值设为grid，使 HTML 元素变为网格容器。
  • 在 CSS 网格中，父元素称为容器（container），它的子元素称为项（items）
• 使用 grid-template-columns 添加多列
  • 你还需要明确网格的结构。在一个网格容器中使用grid-template-columns属性可以添加一些列
  • grid-template-columns属性值的个数表示网格的列数，而每个值表示对应列的宽度。
  • grid-template-columns:100px 100px
• 使用 grid-template-rows 添加多行
  • 你可以像用grid-template-columns设置网格的列一样，用grid-template-rows为网格设置行数。
• 使用 CSS 网格单位来更改列和行的大小
  • fr：设置列或行占剩余空间的一个比例
  • auto：设置列宽或行高自动等于它的内容的宽度或高度，
  • %：将列或行调整为它的容器宽度或高度的百分比，
  • grid-template-columns: auto 50px 10% 2fr 1fr;这段代添加了五个列。第一列的宽与它的内容宽度相等；第二列宽 50px；第三列宽是它容器的 10%；最后两列，将剩余的宽度平均分成三份，第四列占两份，第五列占一份。
• 使用 grid-column-gap 创建多列之间的间距
  • grid-column-gap: 10px;这会在我们创建的所有列之间添加 10px 的空白间隙。
• 使用 grid-row-gap 创建多行之间的间距
  • 可以用grid-row-gap在两行之间添加间隙。
• 使用 grid-gap 更快地添加间距
  • grid-gap: 10px 20px;
• 使用 grid-column 来控制剩余部分
  • 网格的假想水平线和垂直线被称为线（lines）。这些线在网格的左上角从 1 开始编号，垂直线向右、水平线向下累加计数
  • 你可以用grid-column属性定义网格项开始和结束的位置，进而控制每个网格项占用的列数。
  • grid-column: 1 / 3 这会让网格项从左侧第一条线开始到第三条线结束，占用两列。
• 使用 grid-row 来控制剩余部分
• 使用 justify-self 水平对齐项目
  • 你可以使用网格项的justify-self属性，设置其内容的位置在单元格内沿行轴对齐的方式。默认情况下，这个属性的值是stretch，这将使内容占满整个单元格的宽度。
  • start：使内容在单元格左侧对齐，center：使内容在单元格居中对齐，end：使内容在单元格右侧对齐
• 使用 align-self 垂直对齐项目
• 使用 justify-items 水平对齐所有项目
• 使用 align-items 垂直对齐所有项目
• 将网格划分为区域模板
  • 你可以将网格中的一些网格单元格组合成一个区域（area），并为该区域指定一个自定义名称。你可以通过给容器加上grid-template-areas来实现：

grid-template-areas:
  "header header header"
  "advert content content"
  "footer footer footer";
上面的代码将顶部三个单元格合并成一个名为header的区域，将底部三个单元格合并为一个名为footer的区域，并在中间行生成两个区域————advert和content。

• 除了自定义标签，你还能使用句点（.）来表示一个空单元格
• 使用 grid-area 属性将项目放置在网格区域中
  • 在为网格容添加区域模板后，你可以通过添加你定义的名称将网格项放入自定义区域。为此，你需要对网格项使用grid-area
  • .item1 { grid-area: header; }这样，类名为item1的网格项就被放到了header区域里。这种情况下，网格项将使用整个顶行，因为这一行被名为 header 区域。
• 使用 grid-area 创建区域模板
  • 如果网格中没有定义区域模板，你也可以像这样为它添加一个模板：item1 { grid-area: 1/1/2/4; }
  • grid-area: 起始水平线 / 起始垂直线 / 末尾水平线 / 终止垂直线 ;
• 使用 repeat 函数减少重复
  • 这里有一个添加 100 行网格的例子，使每行高度均为 50px：`grid-template-rows: repeat(100, 50px);

grid-template-columns: repeat(2, 1fr 50px) 20px;
效果相当于：

grid-template-columns: 1fr 50px 1fr 50px 20px;

• 使用 minmax 函数限制项目大小
  • 内置函数minmax也可以可用于设置grid-template-columns和grid-template-rows的值。它的作用是在网格容器改变大小时限制网格项的大小。为此，你需要指定网格项允许的尺寸范围
• 使用 auto-fill 创建弹性布局
  • 重复方法带有一个名为自动填充（auto-fill）的功能。它的功能是根据容器的大小，尽可能多地放入指定大小的行或列。你可以通过结合auto-fill和minmax来更灵活地布局
  • repeat(auto-fill, minmax(60px, 1fr));列的宽度会随容器大小改变，在可以插入一个 60px 宽的列之前，当前行的所有列会一直拉伸
• 使用 auto-fit 创建弹性布局
  • auto-fit效果几乎和auto-fill一样。不同点仅在于，当容器的大小大于各网格项之和时，auto-fill将会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而auto-fit则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。
• 使用媒体查询创建响应式布局
• 在网格中创建网格
  • 将元素转换为网格只会影响其子代元素。因此，在把某个子代元素设置为网格后，就会得到一个嵌套的网格