Grid布局详解：容器属性、网格结构和应用实践

"Grid布局详解" Grid布局是一种强大的网页布局方式，通过将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。下面是Grid布局的详细知识点： 一、Grid网格布局特点： Grid布局是将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。Grid布局不同于flex布局，flex布局是流式布局，会按照轴进行排列，如果侧轴方向的大小不统一，则侧轴方向就会有空白处。 二、Grid网格布局与flex的区别： Grid布局是按照网格结构排列，而flex布局是流式布局。Grid布局可以实现更加复杂的布局，而flex布局只能实现简单的流式布局。 三、基础概念： 1. 容器和项目： 容器是设置display：grid的元素，项目是其下的子元素。例如，wrapper为容器，wrapper下面的div为项目，p标签是项目内的子元素。 2. 行和列： 行是容器内水平区域为行，列是容器内垂直区域为列。 3. 单元格： 单元格是行和列的交叉区域。 4. 网格线： 网格线是划分网格的线，水平划分出行，竖直划分出列。 四、grid容器内的方法： 1. display:grid/inline-grid;指定一个容器采用网格布局。 2. grid-template-columns属性，grid-template-rows属性： grid-template-columns属性设置列宽，grid-template-rows属性设置行高。 例如，将容器分成3*3的网格结构，代码如下： ``` .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); } ``` 效果： 将容器分成3*3的网格结构，每个子元素站在一个网格内。 grid-template-columns的值可以是： 1. 具体像素：表示每列的宽度，例如设置grid-template-columns:100px 100px 100px; 2. 百分比：表示每列宽度占据容器宽度的百分比，例如设置grid-template-columns:30% 30% 30%; 3. repeat()：表示设置重复的列宽，例如设置grid-template-columns:repeat(3, 33.33%); 五、justify-content和align-content值： justify-content值可以是： * start：将网格元素左对齐 * end：将网格元素右对齐 * center：将网格元素居中对齐 * space-between：将网格元素分布在整个网格中 * space-around：将网格元素分布在整个网格中，并且每个元素周围都有空白 align-content值可以是： * start：将网格元素顶部对齐 * end：将网格元素底部对齐 * center：将网格元素垂直居中对齐 * space-between：将网格元素分布在整个网格中 * space-around：将网格元素分布在整个网格中，并且每个元素周围都有空白 六、grid-column和grid-row值： grid-column值可以是： * span <number>：将网格元素跨越指定数量的网格单元格 * auto：将网格元素自动计算网格单元格的数量 grid-row值可以是： * span <number>：将网格元素跨越指定数量的网格单元格 * auto：将网格元素自动计算网格单元格的数量