这是我参与「第四届青训营」笔记创作活动的的第2天，今日课程内容主要介绍CSS的一些知识，对于我个人而言，可能最麻烦的就是页面布局问题了，今天的笔记就当是总结一下今日所学的一些常用布局，由于flex布局我平时项目经常用，所以比较熟悉，这里只记录几个其他平时没怎么用过的布局。

一、网格布局

1.容器属性

1.1 display属性

div {
  display: grid;
}

同时也可以设置成行内元素：

div {
  display: inline-grid;
}

1.2 grid-template-columns ， grid-template-rows

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

这两个属性可以定义网格的列宽和行高。同时也支持百分比写法，这里不做展示。

1.3 grid-row-gap，grid-column-gap ，grid-gap

这三个属性用于定义行和列之间的距离。

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

当然也可以用grid-gap进行缩写：

.container {
  grid-gap: 20px 20px;
}

1.4 grid-template-areas


.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。上面代码先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格。多个单元格合并成一个区域的写法如下。


grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';

由于时间有限，暂时写这么多，后面再补充

总结

此次的课程我认为最重要的就是布局问题了，写了这么多的项目，我很清楚的认识到布局的重要性，此前我一直用的是flex布局，感觉它非常的便捷，非常的方便，确实，它在绝大多数情况下解决了我很多的问题。今天的课程讲了一些其它的布局，特别是网格布局令我印象很深，老师上课所讲这是一个最强大的布局，我课后查阅了资料之后，发觉确实如此，它给了网页一个很好的规划，是整个页面能显得有条理性。之前我也接触过网格布局，但那仅仅是用的组件库里的封装好的组件，感觉组件库的组件的功能还是比较少的，在将来的项目编辑中，我会尝试使用一些新的布局，丰富页面内容。

CSS布局|青训营笔记