gird布局

前言

gridLayout是一个基于二维网格的布局系统，与过去的任何web布局系统相比，它完全改变了我们设计用户界面的方式。Grid是第一个专门为解决布局问题而创建的CSS模块，在这之前我们的布局方式多多少少有些hack。

基本概念

1. Grid Container：通过display: grid声明一个容器是网格容器
2. Grid Item：网格容器里面的子项
3. Grid Line：构成网格结构的分界线。它们可以是垂直的（“列网格线”）或水平的（“行网格线”），并且位于行或列的任意一侧
4. Grid Track：两条相邻网格线之间的间距。可以将它们视为网格的列或行。
5. Grid Area：由四条网格线包围的总空间。网格区域可以由任意数量的网格单元组成。

布局样例

两栏布局

<style>
.container{
  display: grid;
  grid-template-columns: 100px auto;
}
</style>
<div class="container">
  <div></div>
  <div></div>
</div>

居中

<style>
.container{
  display: grid;
  place-content: center;
}
</style>
<div class="container">
  <div>inner</div>
</div>

限定列宽的表格

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(200px, 2fr);
}
.container div {
  border: 1px solid;
}
</style>
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

其他布局

<style>
.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 100px 100px 100px;
}
.box {
    padding: 20px;
    border-radius: 5px;
    background-color: #444;
    color: #fff;
    font-size: 150%;
}
.a {
    grid-column: 1 / 3;
    grid-row: 1;
}
.b {
    grid-column: 3 ;
    grid-row: 1 / 3;
}
.c {
    grid-column: 1 ;
    grid-row: 2 ;
}
.d {
    grid-column: 2;
    grid-row: 2;
}
</style>
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>