关于Grid布局的使用_grid布局使用

作者：花生_TL007 | 2024-03-23 14:02:40

踩

grid布局使用

今天在做实验的时候，看到需求是使用网格布局实现。回顾之前的项目基本上都是使用弹性布局，所以对网格布局比较陌生。

于是查找资料并进行系统的学习，特此进行总结。

一、定义

网格布局，顾名思义，像是网格一样将页面中的元素进行排列组合。专业点来讲，就是一组相交的水平线和垂直线构成了网格的列和行。我们根据业务需求将网格元素放在这些位置上。由于之前学习过弹性布局，刚好可以拿来进行对比学习。

二、网格布局VS弹性布局

根据资料显示，弹性布局是为一维布局服务的，空间分布只在行内进行；而网格布局是为二维布局服务的，空间分布在行和列。

说的抽象一点就是，网格布局可以控制坐标轴中的x轴和y轴，而弹性布局只能控制一个坐标轴。

三、网格容器和网格项目

网格里面的区域，分为“网格容器”（container）和“网格项目”（item）

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/295617