前端极其强大优雅的Grid二维网格布局一篇拿捏_前端grid布局
目录
介绍
Grid布局与Flex布局的区别
布局维度
对齐方式
项目排列
Grid常用属性
容器属性（Parent Properties）
子项属性（Child Properties）
实战demo
grid-template-columns
grid-template-rows
grid-gap（或 gap）
grid-row-gap行间隙
column-gap列间隙
fr 单位
justify-content水平对齐
align-content垂直对齐
place-content
flex和grid的两端对齐的区别
auto和auto-fill
auto
auto-fill
网格线跨行跨列
grid-template-areas区域块布局
@media响应式布局
瀑布流布局
介绍
Grid布局是CSS中一种强大的二维布局系统，允许开发者在行和列两个维度上精确控制元素的位置和大小。与Flexbox（一维布局）不同，Grid适用于复杂布局需求，如网页整体结构、仪表盘等。
Grid布局与Flex布局的区别
flex布局和Grid布局是CSS中两种不同的布局模型，各自适用于不同的场景和需求。以下是它们的主要区别：
布局维度
flex布局是一维布局模型，适合处理单行或单列的布局需求，例如导航栏、卡片列表等。它通过主轴和交叉轴控制项目的排列方向。
Grid布局是二维布局模型，适合处理复杂的行和列布局，例如整个页面的结构、网格化的内容区域等。它同时控制行和列的排列。
对齐方式
flex布局通过justify-content和align-items等属性在主轴和交叉轴上对齐项目，适合简单对齐需求。
Grid布局提供了更强大的对齐功能，例如justify-items、align-content等，可以精确控制单元格和轨道的位置。
项目排列
flex布局的项目排列顺序可以通过order属性调整，但无法直接定义固定的行和列结构。
Grid布局允许明确划分行和列，项目可以放置在指定的单元格中，适合需要精确控制布局的场景。
Grid常用属性
容器属性（Parent Properties）
display: gridgrid-template-columns1fr 2fr 或 repeat(3, 100px)）grid-template-rowsauto 200px）grid-template-areasgrid-gap（或 gap）10px 20px）justify-itemsstart, center, end）align-itemsstretch, center）place-itemsalign-items 和 justify-items 的合并简写justify-contentspace-around）align-contentgrid-auto-columnsgrid-auto-rowsgrid-auto-flowrow, column, dense）子项属性（Child Properties）
grid-column1 / 3 或 span 2）grid-row2 / 4）grid-areajustify-selfend）align-selfcenter）place-selfalign-self 和 justify-self 的合并简写案例演示
看再多不如直接上代码实际效果来的直观,下面进行布局的演示
grid-template-columns
可以定义纵向网格的列数
还可以自定义每列的宽度,想让第几列多宽就在对应列位置进行设置,至于这里为什么我们没有设置换行属性其会自动换行,是因为我们在定义列时候只定义了三列嘛,其多出来的自然会自动换行了
grid-template-rows
定义横向网格的行数
看下其均匀的效果
grid-gap（或 gap）
还可以定义其单元格之间的间隙 ,gap定义后为行列双向的间隙
grid-row-gap行间隙
column-gap列间隙
fr 单位
fr（fractional unit）是 CSS Grid 布局中独有的单位，代表网格容器中剩余空间的分配比例。与固定尺寸单位（如 px、em）不同，fr 会根据可用空间动态调整，适合创建灵活的响应式布局。
还可以进行固定设置单列后,剩余列进行按比例分配
可以看到第一列是固定宽度后,剩下的列按照分配的fr比例进行分配剩余宽度空间.行之间的分配也是同样效果,这里不再演示
justify-content水平对齐
和flex一样,grid使用justify-content进行子元素的水平对齐方式
居中
这里可以直接打开浏览器进行多种方式的对齐方式预览
align-content垂直对齐
可以对子级元素设置垂直对齐方式
在浏览器里直接设置预览其他对齐方式效果
place-content
place-content可以同时设置水平和居中对齐方式,align-content和justify-content合并版
flex和grid的两端对齐的区别
下面来看一个flex布局和grid明显区别的一个布局例子
首先来看下flex布局下的两端对齐
可以很明显的看到,在flex布局中,设置了两端对齐,并且换行后,最后一行元素为11和12的块区域,但是12号块区域并没有紧挨着11号块和7号块的列对齐,而是排列到了最后一行的最右侧,此时如果想让12号块再挨着11号块进行排列的话flex布局这里就很不灵活了,需要调整很多属性
下面再来看下grid的两端对齐效果
可以看到使用grid布局进行水平两端对齐时,最后一行的两个元素也不会像flex布局一样分别在左右两侧,而是继续按顺序排列
auto和auto-fill
auto
auto关键字在Grid布局中会根据内容大小自动调整轨道尺寸。当用于grid-template-columns或grid-template-rows时，轨道会扩展以适应其内容。
其中还可以看到,第二列自适应剩余空间同时,还会随着浏览器窗口的拉伸自动自适应调整宽度
auto-fill
auto-fill用于重复轨道定义，尽可能多地填充可用空间。
随着浏览器窗口宽度的变化,元素也在自适应宽度空间进行动态创建,非常灵活
网格线跨行跨列
有的时候我们布局的情况下会进行不规则的布局,不可能都是前面进行的基本大小都一样的九宫格局部,肯定有跨行跨列的多样式布局.比如圣杯布局
网格轨道：grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。容器内部的水平区域称为行，垂直区域称为列。下图中 One、Two、Three 组成了一行，One、Four 则是一列
网格单元：一个网格单元是在一个网格元素中最小的单位， 从概念上来讲其实它和表格的一个单元格很像。上图中 One、Two、Three、Four…都是一个个的网格单元
网格线：划分网格的线，称为\"网格线\"。应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。m 列有 m + 1 根垂直的网格线，n 行有 n + 1 跟水平网格线。比如上图示例中就有 4 根垂直网格线。一般而言，是从左到右，从上到下，1，2，3 进行编号排序。当然也可以从右到左，从下到上，按照 -1，-2，-3…顺序进行编号排序
注意网格线编号是从1开始，从左到右递增。
跨行和跨列的使用方式一样,不再过多进行演示,注意写的时候是写在子元素的css属性上面的
下面来看个使用grid跨行跨列的计算器布局
grid-template-areas区域块布局
grid-template-areas 是 CSS Grid 布局中用于定义网格区域名称的属性。通过给网格单元格分配名称，可以直观地控制布局结构。
通常和grid-template-area联合使用,grid-template-area使用css选择器进行单独绑定某个单元格的区域元素
@media响应式布局
@media 查询是 CSS 中用于实现响应式设计的关键工具，结合 CSS Grid 布局，可以灵活调整网格结构以适应不同屏幕尺寸。
比如电脑屏幕和手机屏幕很明显分辨率问题显示的页面有时候需要响应式的进行调整
设置屏幕宽度小于一定数值时改变其布局方式
可以看到在屏幕宽度变化到一定数值时,我们设置的响应式布局生效,菜单块就跑到头部位置去了
瀑布流布局
在布局中有时会遇到等宽不等高的瀑布流布局,使用grid也可以很方便地实现瀑布流
首先准备好图片和页面结构绑定
预览下
样式很杂乱
现在用grid实现等宽不等高的瀑布流式布局
来预览下效果
可以看到grid很容易就实现了瀑布流的布局,而且随着屏幕宽度的变化,瀑布流里面的样式列表也在进行着变化
