Grid布局

浏览器兼容

image.png

Grid布局概述

grid布局类似于传统的table布局，但更加强大，性能也消耗也更小

table是在HTML实现，很容易触发重排，性能消耗大；grid是在css中实现，功能也更强大

Grid，顾名思义，网格布局，相比flex的一维布局，Grid的布局是对行列同时定义的二维布局，功能更强大也更复杂。相比于已经流行起来的flex布局，其兼容性只适用于IE10+的浏览器。

对于Grid布局，首先要了解网格的几个基本内容：row(行)、column(列)、line(线)或gap(间距)、cell(单元格)、area(区域)，其中area代表一个或多个cell组成的内容

image.png

常用属性

grid-template-columns和grid-template-rows

设置网格的行列数及宽高，宽高设置时可以使用固定长度也可使用 [number] fr 来设定响应式的宽高，类似于flex布局中的flex-grow。

示例代码：3*3的网格，其中每个cell的高为100px，宽度自适应，将父容器等比例分为三部分

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px 100px;
/* 或使用以下写法 */
/* grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(3, 100px); */
}

<div class="container">
    <div style="background-color: antiquewhite;">1</div>
    <div style="background-color: aqua;">2</div>
    <div style="background-color: blueviolet;">3</div>
    <div style="background-color: brown;">4</div>
    <div style="background-color: cadetblue;">5</div>
    <div style="background-color: chartreuse;">6</div>
    <div style="background-color: chocolate;">7</div>
    <div style="background-color: coral;">8</div>
    <div style="background-color: cornflowerblue;">9</div>
<div>

image.png

grid-auto-rows和grid-auto-columns

该属性为网格设置默认宽度和高度，当未设置grid-template-columns、grid-template-rows等属性的网格渲染时，会按照默认值来渲染

grid-template-columns: 200px 200px 1fr;
grid-template-rows: 200px;
grid-auto-rows: 100px;

image.png

grid-template-areas和grid-area

该属性可为网格划分区域

grid-template-areas: 
      "header header header header"
      "sidebar main main main"
      "footer footer footer footer"

.footer {
    grid-area: footer;
}

<div class="container">
  <div style="background-color: antiquewhite;">1</div>
  <div style="background-color: aqua;">2</div>
  <div style="background-color: blueviolet;">3</div>
  <div style="background-color: brown;">4</div>
  <div style="background-color: cadetblue;">5</div>
  <div style="background-color: chartreuse;" class="footer">6</div>
  <div style="background-color: chocolate;">7</div>
  <div style="background-color: coral;">8</div>
  <div style="background-color: cornflowerblue;">9</div>
</div>

image.png

row-gap和columns-gap

设置网格线的宽度，也可使用其语法糖grid-gap: row column;

示例代码，将网格线的行列线分别设置为5px 10px

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);

    row-gap: 5px;
    columns-gap: 10px;
/* 或使用以下写法 */
/* grid-gap: 5px 10px */
}

image.png

网格对齐属性

justify-content、align-content是网格相对整个表格的对齐方式，具体属性包含：start（默认值）、end、center、stretch、space-between、space-around、space-evenly

justify-items、align-items是网格内的内容相对于该网格的对齐方式，具体属性包含：start（默认值）、end、center、stretch

justify-self、align-self写在某个具体网格内，设定网格内的内容相对该网格的对齐方式，具体属性包含：start（默认值）、end、center、stretch

justify-content: center;
align-content: center;

image.png

justify-items: center;
align-items: center;

image.png

justify-self: center;
align-self: center;

image.png

min-content与max-content

二者分别用于设置某列网格根据文本长度来自适应宽度

grid-template-columns: 200px min-content 200px;

image.png

grid-template-columns: 200px max-content 200px;

image.png

网格项属性

网格线从左到右、从上到下序号依次为1,2,3,4......，网格在布局时，可以设置某个网格从某个网格线开始到某个网格线结束。用到属性：grid-column-start、grid-column-end、grid-row-start、grid-row-end

.container > div:nth-of-type(1) {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
  }

image.png

设定网格1为第二个竖网格线开始到第四个竖网格线结束，第一个横网格线开始到第三个网格线结束，也就是占据3*4网格的第2、3、5、6个表格

grid-row-end与grid-column-end还可使用 span+数字 的形式来设置该部分内容占据多少个网格，利用该特性可实现瀑布流布局

设置基础grid布局，添加12个内容块

.container {
    display: grid;
    grid-template-columns: 200px 200px 1fr;
    grid-template-rows: 200px;
    grid-auto-rows: 100px;
  }

为第1个内容块与第6个内容块分别添加样式

<!-- 第一个内容块添加 -->
grid-row-end: span 2;
<!-- 第六个内容块添加 -->
grid-column-end: span 2;

image.png