前端基础之Grid布局

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

Grid布局概述

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

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

Grid布局相关概念

1. Grid容器和项目

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

01   <div clas