css中布局问题一直都是让人头大的问题，因为我们要去控制每一个元素的位置，同时还是处理好各元素之间的互相影响，CSS布局迫切需要一种简单、快速、方便的布局方法，这种方法就是grid布局

从grid的布局我们可以知道它的布局是一种类似网格的方式分割页面，而我们需要做的只有两件事

按照你的需要合理分割页面
根据你的所分割的好的网格，将内容填充到对应的网格中

以上这两点就是你布局所要关注的全部

分割页面

如图所示，我们要分割一个3行4列的网格

.main {
	父元素
    display: grid;
    grid-template-rows: 200px 200px auto;
    grid-template-colomns: repeat(4,1fr)
}

rows: 就是设置行的属性，我们可以使用具体值px，百分数% colomns: 是设置列的属性，repeat表示连续重复的列，他们的宽度是1fr，平分宽度

填充内容

复杂手动填充

所谓的复杂手动填充的意思就是，我们要为每一个元素去设置它的位置，但是这种位置类似一种坐标，统一且规范

坐标基点：网格容器左上第一个网格，四条边都有编号，上右下左依次为1，2，2，1，没错，你会发现规律，每增加一行或者一列对应的编号就会＋1

.content {
	grid-row-start: 1;      行起始位置
    grid-column-start: 1;   列起始位置
    grid-row-end: 4;		行终止位置
    grid-column-end: 2;		列终止位置
}

起始位置到终止位置的区域就是我们选中的网格

但是一次写这么多行有点麻烦

.content {
	grid-row: 1/4;
    grid-column: 1/2;
}

对于想直接从头选到尾的情况来说，我们还可以这么写

.content {
	grid-row: 1/-1;
    grid-column: 1;
}

自动网格定位

这种定位比较简单，可以批量的操作

.main {
	display: grid;
    grid-template-row: auto auto auto;
    grid-template-columns: repeat(5, 1fr);
}
.header {
	grid-row: 1/-1;			header元素站的是一列
}
.content {					content元素占的是2行一块
	grid-column: span 2;
}

如果想要更改排列的顺序，我们可以根据order属性，数值越大越靠前

纯自动

grid-auto-flow: row
grid-auto-flow: column

最强大的排版功能——网络模板区

它实际和我们的自动排版很相似，但是其中最大也是最有用的区别就是，我们可以用一种可视化的方式排版

<div class="main">
        <h1 class="header">this is header</h1>
        <div class="ad">ad1</div>
        <div class="ad2">ad2</div>
        <div class="content">many things in content part</div>
        <div class="dot">this is dot</div>
        <div class="dot">this is dot</div>
        <div class="middle">this is middle</div>
        <div class="dot">this is dot</div>
</div>

css代码

.main {
    width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-rows: 200px 200px auto;         还可以直接grid-auto-columns: 1fr
    background: green;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "h1 haha mama last"		行数和列数和你定义的网格容器一致
                         "h1 haha . last"			这就是模板，我们可以用任意名字命名
                         ". . . one";				相同的名字就是连在一起的区域
}
.header {
    grid-area: h1;
}
.content {
    grid-area: last;
    background: pink;							将每个元素对应到模板中的别名中去
}
.ad {
    grid-area: haha;
}
.ad2 {
    grid-area: mama;
    background: yellow;
}

对于没有指定模板别名的网格区，默认的自动定位算法会将他们放到剩余空间中

元素在网格中对齐属性

align-self: start end justify center
justify-self: start end justify center

组合使用，十分简单，大家可以自己敲一遍

到这为止，你就可以简单用grid的布局，完成很大一部分的布局需求了

【grid】简单快速上手