CSS3特性及应用【3】—— 网格容器模型，关于grid的那些事

最后一篇css3基础特性整理完成啦~
flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维布局，Grid 布局是二维布局。

flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了"行"和"列"，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

flex布局示例:

Grid 布局示例：

网格布局

CSS3网格布局使用网格容器和网格项来创建网格化布局。

网格容器属性

Grid-Container 网格容器

Grid网格布局，是目前唯一一种 CSS 二维布局。比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。

我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。一旦我们这样做，这个元素的所有直系子元素将成为网格项目

.container {
  display: grid;
}

网格线：划分网格的线，称为"网格线"。

网格容器属性 ------ grid-template-columns(网格列)属性

grid-template-columns 属性设置列宽。

接收一个由列宽组成的空格分隔列表，列表中的每个值表示网格布局中每列的宽度。

.container {
  display: grid;
  grid-template-columns: 100px 200px 300px;
}

上面的例子中，网格容器被划分为三列，第一列宽度为 100 像素，第二列宽度为 200 像素，第三列宽度为 300 像素。

*ps：在设置的数值的时候，还可以直接使用比例，例如：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr;
}

效果就是元素宽度为1：2：3

*也可以用百分数，auto等等

网格容器属性 ------ grid-template-rows(网格行)属性

grid-template-rows 属性设置行高。

接收一个由行高组成的空格分隔列表，列表中的每个值表示网格布局中每行的高度。

.container {
  display: grid;
  grid-template-columns: 100px 200px 300px;
  grid-template-rows: 100px 200px 300px;
}

上面的例子中，网格容器被划分为三行，第一行高度为 100 像素，第二行高度为 200 像素，第三行高度为 300 像素。

网格容器属性 ------ grid-row/column-gap 设置行/列间距

.container{
    grid-row-gap:10px;
    grid-column-gap:90px;
}

.container{
    grid-gap:10px 90px;
}

网格容器属性 ------ grid-template-areas 规定网格区域的名称

.container{
    grid-template-areas:
        "header header header headerz"
        "main main . sidebar"
        "footer footer footer footer";
}

网格容器属性 ------ place-items (align-items&justify-items)

align-items：调整网格中的元素在纵轴方向的排布（上下）

justify-items ：调整网格中的元素在横轴方向的排布（左右）

可以组合成一个来写：place-items: start start;

网格容器属性 ------ place-items(align-content&justify-content)

align-content：调整网格中的所有单元格在纵轴方向的排布（上下）

justify-content：调整网格中的所有单元格在横轴方向的排布（左右）

网格项属性

网格项属性 ------ grid-column/row (合并列/行)属性

grid-column 属性定义一个网格项跨越的列数 或起始和结束的列位置。

它接收一个由起始列和结束列组成的值，或一个由列数组成的值。

.item1 {
  grid-column-start:1;  /*第一条线开始*/
  grid-column-end:3;  /*第三条线结束*/
    
  或者可以直接写成：
  grid-column:1/3;
}

grid-row 同理，grid-row属性定义一个网格项跨越的行数 或起始和结束的行位置。

它接收一个由起始行和结束行组成的值，或一个由行数组成的值。

.item1 {
  grid-row: 2 / 4;
}

上面的例子中，.item元素跨越两行，从第二行开始到第四行结束。

.item1 {
  grid-column-start:1;  /*第一列开始*/
  grid-column-end:3;  /*第三列结束*/
    
  或者可以直接写成：
  grid-area:1/3;
}

网格项属性 ------ grid-area

grid-area属性调节项目在网格中的位置，这个位置可以是指定？/？/？/？，也可以指定之前定义的名称，例如header footer等。

.item1 {
    1.设置为名称：
  grid-area:header;
    2.设置为位置
  grid-area:1/2/3/4;  
}

这里的grid-area:1/2/3/4 指的是，行从第一条线开始，到第三条线结束；列从第二条线开始，第四条线结束。

网格项属性 ------ align-self & justify-self

align-self ：单独设置项目在网格的纵向的位置

justify-self ：单独设置项目在网格的横向的位置

*网格布局总结：

网格布局的应用

实现网格布局中的自适应布局

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

.item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

• 使用 grid-template-columns 属性将容器设置为自适应宽度的网格布局。

• 使用 repeat() 函数和 auto-fit 关键字实现自适应宽度的重复结构。

• 使用 minmax() 函数设置每个网格单元格的最小宽度和最大宽度，从而实现自适应布局。

• 使用 grid-gap 属性设置网格之间的间隔。

网格布局------不规则布局

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

.item1 {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

.item2 {
  grid-row: 1 / 2;
  grid-column: 2 / 4;
}...

• 使用 grid-template-columns 属性将容器划分为三列，并使用 1fr 实现简单的重复结构。使用 grid-gap 属性设置网格之间的间隔。
• 使用 grid-row 和 grid-column 属性将各个子元素定位到不同的网格单元格中，从而实现不规则布局。

网格布局------嵌套布局

<div class="grid-container">
  <div class="item item1">内容1</div>
  <div class="item item2">内容2</div>
  <div class="item item3">内容3</div>
  <div class="parent-grid"> 
    <div class="item item4">内容4</div>
    <div class="item item5">内容5</div>
    <div class="child-grid">
      <div class="item item6">内容6</div>
      <div class="item item7">内容7</div>
    </div>
  </div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr, 1fr;
  grid-gap: 10px;
}

.parent-grid {
  display: grid;
  grid-template-columns: 1fr, 1fr;
  grid-gap: 10px;
}

.child-grid {
  display: grid;
  grid-template-columns: 1fr, 1fr;
  grid-gap: 10px;
}

.item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

• 使用 display: grid 属性将容器设置为网格布局。
• 使用 grid-template-columns 属性将容器划分为两列。
• 使用 grid-gap 属性设置网格之间的间隔。

.item1 {
  grid-column: 1 / 3;
}

.item4 {
  grid-row: 1 / 3;
}

.item5 {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.item6 {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

.item7 {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

• 使用 grid-row 和 grid-column 属性将各个子元素定位到不同的网格单元格中。