Grid网格布局,解决flex布局痛点

ZhaiMou

于 2024-07-17 19:05:13 发布

阅读量622

点赞数 26

文章标签： css3 css 前端开发语言

本文链接：https://blog.csdn.net/weixin_63625059/article/details/140503040

版权

Grid和Flex布局区别与介绍

Flex布局是一种单轴布局模型，适合在一个维度（行或列）上对项目进行灵活的排列和对齐。它非常适合构建单一维度的布局，比如导航菜单、工具栏、侧边栏等。
Grid布局则是一个二维的布局系统，可以同时控制行和列，以网格的形式精确布局项目。Grid适合构建复杂的多维度布局，例如整体页面的布局、文章列表或图像展示。

前言

在工作中flex应用非常广泛,但在使用flex布局有一些痛点比如在使用justify-content:space-between;让子元素两端对齐，中间自动会分配间距形成这种情况

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<style>

.container {

display: flex;

flex-wrap: wrap;

height: 500px;

width: 500px;

justify-content:space-between;

}

.container div {

background-color: rgba(0, 0, 0, 0.7);

margin-left: 10px;

height: 50px;

width: 50px;

}

</style>
<body>
<div class="container">

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

</div>

</body>


</html>

请添加图片描述
平常这种需求应该是左对齐的，用flex就麻烦了,像这种需求用Grid二维布局就会简单许多

Grid布局介绍与使用

定义网格容器属性 (`display: grid;`):

display:grid;

定义网格列和行 (`grid-template-columns`, `grid-template-rows`):

定义网格的列和行的大小，可以使用像素(px)、百分比(%)、自动填充(auto)、fr等值。 fr可以用来创建自适应网格布局

grid-template-columns:1fr 1fr 1fr;
grid-template-rows:100px 200px 300px;

请添加图片描述

网格列和行的自动填充 (`repeat`, `fr`):

使用 repeat() 可以快速重复定义相同大小的网格轨道。

grid-template-columns: repeat(3, 1fr);`

网格列和行的间距(`gap`):

上下左右间距20px
gap:20px;
左右间距为20px，上下艰巨10px
gap:10px 20px;

跨越多个网格单元格 (`grid-column`, `grid-row` 的扩展):

子项 grid-column: 从哪列开始 / 哪列 + 到哪列比如 1/3 等于从第一列跨到第二列

.one{
	grid-column: 1 / 3; /* 从第1列到第3列 */ grid-row: 1; /* 第1行 */
}

请添加图片描述

有时想做响应式布局不确定几列

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
自动根据网格容器的大小填充列，使得每列最小宽度为100像素，同时根据可用空间自适应调整列的宽度，直到填充满整个容器
特别适合在响应式设计中使用，因为它允许网格自动适应不同尺寸的屏幕和视口大小，同时保持良好的布局结构。

如果对你有所帮助就点个关注吧❤️❤️❤

ZhaiMou

关注

26
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Grid网格布局,解决flex布局痛点

Flex布局是一种单轴布局模型，适合在一个维度（行或列）上对项目进行灵活的排列和对齐。它非常适合构建单一维度的布局，比如导航菜单、工具栏、侧边栏等。Grid布局则是一个二维的布局系统，可以同时控制行和列，以网格的形式精确布局项目。Grid适合构建复杂的多维度布局，例如整体页面的布局、文章列表或图像展示。在工作中flex应用非常广泛,但在使用flex布局有一些痛点比如在使用justify-content:space-between;让子元素两端对齐，中间自动会分配间距形成这种情况。
复制链接

扫一扫