前端基础之Grid布局

【图书推荐】《HTML5+CSS3 Web前端开发与实例教程（微课视频版）》-CSDN博客

Grid布局概述

Grid布局又称为网格布局（Grid Layout），是一种现代且功能极为强大的二维网页布局系统。它将容器划分为行和列，产生单元格，然后指定元素所在的网格单元。相较于传统的布局方式如浮动布局、定位布局、Flex布局，Grid布局提供了一种更为精细和灵活的方式来实现复杂的网页布局结构。这种布局方式极大地增强了网页设计的灵活性和创造性，使得开发者能够高效构建复杂、模块化和适应性强的布局方案。

Grid布局与Flex布局的相似之处在于都可以指定容器内部多个项目的位置，但两者又存在较大的区别。Flex布局只能基于水平或垂直的主轴进行布局，是一种一维布局；而在Grid布局中由水平方向的行和垂直方向的列划分容器产生单元格，是一种二维布局。当需要实现多行多列的效果时，使用Grid布局更为方便、快捷。

Grid布局相关概念

1. Grid容器和项目

使用Grid布局的元素，称之为Grid容器（Grid Container），简称“容器”。容器中的所有直接子元素（不含子孙元素）会变成Grid元素，称为Grid项目（Grid item），简称“项目”。

01   <div class="container" style="display: grid;">
02       <div class="item"><p></p></div>
03       <div class="item"><p></p></div>
04       <div class="item"><p></p></div>
05   </div>

第01行代码的div为网格容器，第02~04行代码class属性为“item”的div元素为网格项目，但是该div标签中嵌套的p元素并不是网格项目，不受Grid 网格布局的影响。

2. 行、列、单元格

如图13-1所示，容器中划分网格的线称为网格线（grid line），网格线分为水平网格线和垂直网格线两种，两条水平网格线之间的区域称为行（row），两条垂直网格线之间的区域称为列（column），行、列交叉区域称为单元格（cell）。

图13-1  行、列、单元格

display属性

任何一个容器（块级元素或内联元素）都可以被指定为Grid布局，只需将其display属性值设置为grid或者inline-grid即可。

01   .container {

02       display: grid | inline-grid;

03   }

当为父容器设为Grid布局以后，子元素的float、clear和vertical-align属性将失效，且子元素的display属性将变为inline-block。

划分网格

在Grid布局中最重要的就是划分行和列，CSS3中提供grid-template-columns属性定义每一列的列宽、grid-template-rows属性定义每一行的行高。两者的使用方法相同，属性值以空格分隔，属性值的个数代表了行（列）的数量，值可以是固定值、百分比、关键字或者函数。

 行间隔和列间隔

在Grid布局中使用row-gap设置行与行之间的间隔，使用column-gap设置列与列之间的间隔，属性值一般为像素。

gap属性是row-gap和column-gap的合并简写形式，其属性值有两个值。第一个值表示行间隔，第二个值表示列间隔，当省略第二个属性值时表示与第一个属性值相同。

项目对齐方式

在网格布局中，justify-content属性用于定义网格项目在水平方向上的对齐方式，align-content属性用于定义网格项目在垂直方向上的对齐方式。