Grid布局

Grid布局的基本概念

首先先创建一个父的div，称为"容器"（container）。再创建多个子元素，称为"项目"（item）

<div class="main">
	<div class="item item-1">1</div>
	<div class="item item-2">2</div>
	<div class="item item-3">3</div>
	<div class="item item-4">4</div>
	<div class="item item-5">5</div>
	<div class="item item-6">6</div>
	<div class="item item-7">7</div>
	<div class="item item-8">8</div>
	<div class="item item-9">9</div>
	<div class="item item-10">10</div>
</div>

上面代码最外层的div就是为 ‘容器’, 里面的多个div为 '项目’

这时我们需要给容器设置grid布局

.main {
  display: grid;
}

设置完容器的grid布局以后默认是没有行和列需要自己设定

 /* 设置列 */
  grid-template-columns: 100px 100px 100px;
  /* 设置行 */
  grid-template-rows: 100px 100px 100px 100px;