Grid布局定义

CSS的网格布局模块提供了一个基于网格的布局系统，能够以行和列来进行布局，使其更容易设计网页，而不必使用浮标和定位。

只要给块级元素设置display:grid 或者给内联元素设置display:inline-grid， Grid布局就可以创建

先看一下效果

display属性被设置为网格或内联网格。

使用grid布局主要需要做的是将display设置为grid(块级元素)或inline-grid(内联元素)

// grid-container称为grid容器
<div class="grid-container">
  // grid-item称为grid子项
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div> 
</div>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>

主要属性介绍

为了使一个HTML元素表现为一个网格容器，你必须设置显示属性为网格或内联网格。网格容器组成的网格项目，网格项目又置于行和列内。

grid-template-columns

该属性定义的列数在网格布局，它可以定义每个列的宽度。其值是一个空格分隔列表，其中每个值定义的相应列的长度。

css数据类型，表示网格容器内的灵活长度（如1fr,1.5fr)

注意：为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和1.5fr，就表示后者是前者的1.5倍。

语法：

grid-template-columns: <track-size> ... | <line-name> <track-size>...

• ：宽度尺寸。可以是长度值，百分比值，以及fr单位（网格剩余空间比例单位）。

• ：自定义的命名。

.grid-container {
  display: grid;
  //网格布局有4列,所占宽度分别为50px 40px 30nepx 20px
  grid-template-columns: 50px 40px 30px 20px;
  //网格布局有5列,所占宽度分别如下
  grid-template-columns: 50px 40px 30px 20px 10px;
  // 容器分成3列，一列宽度为50px，然后将容器剩下的部分成2个部分,第二列和第三列各占1个部分
  grid-template-columns: 50px 1fr 1fr;
  // 自定义命名
  grid-template-columns: [第一纵线] 80px [纵线2] auto [纵线3] 100px [最后的结束线];
}

grid-template-rows

该属性定义每一行的高度。

语法：

grid-template-rows: <track-size> ... | <line-name> <track-size> ...

• ：宽度尺寸。可以是长度值，百分比值，以及fr单位（网格剩余空间比例单位）。

• ：自定义的命名。

.grid-container {
  display: grid;
  // 网格布局有2行,所占高度分别如下80px 200px
  grid-template-rows: 80px 200px;
  // 容器分成3行，一行高度为50px，然后将容器剩下的高度分为2个部分,第二行和第三行高度各占1个部分
  grid-template-rows: 50px 1fr 1fr;
  // 任意命名
  grid-template-rows: [第一行开始] 25% [第一行结束] 100px [行3] auto [行4] 60px [行末];
}

justify-content

该属性用于横向对准容器内整个网格

语法：

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

可能取值

• stretch：默认值。拉伸，宽度填满grid容器，拉伸效果需要网格目标尺寸设为auto时候才有效，如果定死了宽度，则无法拉伸。

• space-evenly：evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。

• space-around：around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。

• space-between：表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。

• center：表现为居中对齐。

• start: 逻辑CSS属性值，与文档流方向相关。对齐容器的起始边框,默认表现为左对齐。

• end：逻辑CSS属性值，与文档流方向相关。对齐容器的结束边框,默认表现为右对齐。

.grid-container {
  display: grid;
  justify-content: end;
}

space-evenly	space-around	space-between	center	start	end

align-content

该属性用于竖直地对准在容器内部的整个网格。

语法：

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

可能取值

• stretch：默认值。每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50%。

• start： 逻辑CSS属性值，与文档流方向相关。默认表现为顶部开始。

• end： 逻辑CSS属性值，与文档流方向相关。默认表现为底部开始。

• center： 表现为整体垂直居中对齐。

• space-between: 上下两行两端对齐。剩下每一行元素等分剩余空间。

• space-around： 每一行元素上下都享有独立不重叠的空白空间。

• space-evenly： 每一行元素都完全上下等分。

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}