CSS之grid布局

一、前言

相信大家在学完flex弹性布局后，都觉得布局很轻松了，浮动布局也用的没那么多了（几乎不会用到）。但是，直到工作时遇到了flex不太好弄的布局时，例如二维布局且盒子区域不定，有的盒子水平占据两格，有的盒子竖直占据三格等。于是，我开始学习grid布局。

二、容器属性

2.1 设置grid布局

display:grid;

2.2 设置行高、列宽

/*  声明了两行，行高分别为 50px 50px,列宽分别为200px 100px 200px  */
grid-template-columns: 200px 100px 200px;
grid-template-rows: 50px 50px;

/*  声明了两行，行高分别为 50px 50px  */
grid-template-rows: repeat(2, 50px);

/*  等比例设置，将每一行都分成同等份  */
grid-template-rows:1fr 1fr 1fr;
grid-template-rows:repeat(3, 1fr);	

/*  自动填充  */
grid-template-rows:repeat(auto-fill, 100px);

/*  不确定单元格大小  */
grid-template-rows:repeat(2, minmax(50px,100px));

2.3 设置单元格之间的间距

/*  行间距  */ 
row-gap:20px;
/*  列间距  */
column-gap:20px;

/*  简写    */
gap: 20px 20px;

2.4 设置布局区域

/*  将两行三列的区域命名，子元素可以通过grid-area属性占据对应的位置 */
grid-template-areas:
	"header header"
	"nav main"
	"footer footer";
}

2.5 设置流动处理机制

grid-auto-flow: row dense;

解释：设置容器优先摆放水平方向。未设置前，如图1所示。设置后，如图2所示。

2.6 整体对齐方式

justify-content:center | start | end | space-evenly | space-around | space-between;
align-content:center | start | end | space-evenly | space-around | space-between;

/*  简写  */
place-content: justify-content值 align-content值;

三、项目属性

3.1 根据栅格线编号放置元素

/*  放在第二行第一列的位置  */
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;

3.2 根据偏移量定位元素

/*  在三行三列网格中显示在中间  */
grid-column-start: 2;
grid-row-start: 2;
grid-column-end: span 1;
grid-row-end: span 1;

/*  元素定位简写  */
grid-row: 1 / 4;   = grid-row: 1 / span 3;
grid-column:1 / 2; = grid-column: 1 / span 1;

3.3 区域定位

/*  grid-area:行开始 列开始 行结束 列结束;  */
grid-area: 2/2/3/3;

/*  占据区域名为footer的位置  */
grid-area: footer;

3.4 所有元素对齐方式

justify-items:center | start | end | space-evenly | space-around | space-between;
align-items:center | start | end | space-evenly | space-around | space-between;

/*  简写  */
place-items: justify-items值 align-items值;

3.5 单个元素对齐方式

justify-self:center | start | end | space-evenly | space-around | space-between;
align-self:center | start | end | space-evenly | space-around | space-between;

/*  简写  */
place-self: justify-self值 align-self值;

四、demo

效果：
demo

实现思路：将容器分为三行两列，并将这些区域命名，然后元素通过grid-area属性占据对应的位置。

<div class="container">
  <header>header</header>
  <nav>nav</nav>
  <main>main</main>
  <footer>footer</footer>
</div>

.container {
  width: 500px;
  height: 200px;
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: 30px 1fr 30px;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
}
header{
  background-color: red;
  grid-area: header;
}
nav{
  background-color: gray;
  grid-area: nav;
}
main{
  background-color: green;
  grid-area: main;
}
footer{
  background-color: blue;
  grid-area: footer;
}

五、个人使用总结

Grid布局是一种二维布局方式，在布局上有一定的便利，能够将整体容器进行二维布局。不过容器里的项目可以使用flex布局去进行处理（看UI原型图而定），总之grid处理整体，flex处理细节，二者兼用，效率翻倍。