CSS网格布局

创建css网格

display:grid
在网格中，父元素成为容器 子元素成为项

使用grid-template-columns(rows)添加多列和多列

grid-template-columns: 50px 50px;//添加两列，均为50px
grid-template-rows:100px 100px;//添加两行，均为100px
grid-template: 100px 100px / 200px 200px斜杠钱为行 后为列

使用CSS网格单位来更改列和行的大小

fr(fraction的缩写，意为片段)，设置列或行占剩余空间的比例
auto 设置列宽或者行高等于内容的宽度或高度

使用grid-column（rows）-gap设置列间距和行间距

grid-column-gap:20px //列间距为20px
grid-row-gap:20px  //行间距为20px
grid-gap:20px 40px //行间距20px 列间距40px

使用grid-column（row）控制空间大小

grid-column:1 / 3 从第一条线开始到第三条线 占据两列
grid-row: 2 / 4 从第行条线开始到第四条线 占据两行

使用justify-self 设置单元格内容的水平位置

 start end center stretch(拉伸占满)

使用align-self 设置单元格内容的垂直位置（上中下）

start end center stretch(拉伸占满)

使用justify-items属性设置所有单元格的水平位置

start end center stretch(拉伸占满)

align-items 属性设置所有单元格的垂直位置

start end center stretch(拉伸占满)

指定区域

使用grid-area 命名区域
使用grid-template-areas数据线引用明明网页项

创建区域大小和位置

grid-area:1 （开始行）/1（开始列） /4（结束行）/4（结束列）

repeat函数

在使用grid-template-columns和grid-template-rows定义结构时如果要输入重复的值可以使用repeat替代
repeat(100,50px 1fr)逗号前表示重复次数 逗号后表示要重复的内容

minmax函数

minmax(10px,1fr)表示大于10px小于1fr

auto-fill关键字

auto-fill会尽可能容纳更多的单元格 会在一端持续放入空行或空列

auto-fit关键字

auto-fill不会在一段放入空行和空列 将所有网格拉伸至合适位置

可以使用媒体查询创建响应式布局

  @media (min-width: 500px){
    .container{
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "header header"
        "advert content"
        "footer footer";
    }
  }

嵌套布局

可以在项中继续使用display 和grid-template-rows（columns）进行布局

空间布局

place-items: align-items justify-items
place-items:center 为垂直居中和水平居中的简写 居中布局
place-items:start 左上角
place-items:end 右下角

两栏布局

一栏设定固定值 另一栏设置剩余空间
grid-template-columns:minmax(100px,200px) 1fr;

三栏布局

两栏固定值 中间剩余值
grid-template-rows: auto 1fr auto;

五栏布局

grid-template: auto 1fr auto / auto 1fr auto;