Grid布局介绍

于 2022-08-01 14:58:15 发布
阅读量162 收藏
点赞数
分类专栏： 面试 学习路线 阿里巴巴 文章标签： android 前端 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67401228/article/details/126101526
版权

1、什么是Grid布局

Grid布局即网格布局，是一种新的css模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种css二维布局。

2、和flex布局的区别

Grid布局和flex布局是有实质性的区别的，flex是一维布局，只能处理一个维度上的布局，一行或者是一列。但是Grid布局是二维布局 ，将容器划分成了“行”和“列”，产生了一个个的网格，可以将网格元素放在行和列相关的位置上，从而达到了布局的目的。

flex布局示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EvPhz2Tm-1650274526450)(image-20220418170327412.png)]

Grid布局示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MkDsHpXv-1650274526451)(image-20220418172044225.png)]

3、Grid布局

最低0.47元/天 解锁文章
m0_67401228
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
0726 弹性布局 grid布局
m0_56381561的博客
07-26 244
align-items决定的是侧轴的显示方式会分成n等份在每一份空间里置顶(flex-start)居中(center)或者靠下(flex-end)1.justify-contentspace-around每个子标记左右两边间距相同(并且两边的子标记到边框的距离等于子标记之间距离的一半)布局是二维布局，将容器划分成了“行”和“列”，产生了一个个的网格，可以将网格元素放在行和列相关的位置上，从而达到了布局的目的。如果子标记尺寸超过弹性盒子(父标记)的尺寸弹性盒子(父标记)会压缩子标记。...
弹性布局和Grid布局
weixin_70815247的博客
07-26 221
但flex布局和Grid布局有实质的区别，那就是flex布局是一维布局，Grid布局是二维布局。Grid布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。3flex-flow||flex-direction和flex-wrap的简写。项目默认沿主轴排列。......
Grid布局简介
weixin_34082854的博客
05-13 449
Grid 布局是网站设计的基础，CSS Grid 是创建网格布局最强大和最简单的工具。 轻松使用 Grid 布局提高开发效率，对复杂的网页结构布局更加灵活。 一、概述 Grid 将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。 我们比较熟悉的比如说坐标轴，坐标点；如果你看...
web学习 -- css grid 网格布局和项目属性
qq_39273039的博客
08-05 329
网格布局将网页划分为一个个网格，任意组成不同风格，做出各种各样的布局。 容器内部采用网格定位的子元素，被称为“项目”
弹性布局看完了，来看看grid布局咯
皮蛋solo粥的博客
04-20 141
grid-template-rows：指定行，三个参数表示三行，然后参数值是每一行的高度 grid-template-columns：指定列，五个参数表示五列，然后参数值是每一列的宽度 grid-template-areas：划定网格分布，因为元素都不会很均匀，有点不规则，所以一般用这样的形式划定分割，会比较清晰。 gap：指定行列间隙间距是多少。 gird-area：子元素使用，大家按照名字来领取各自的领地啦！！！ ...
Grid简单入门布局.pptx
02-25
在【Grid简单入门布局.pptx】的技术分享中，主要介绍了Grid布局的基本概念、与其他布局方式的区别以及相关的关键特性。 **Grid布局基础** 1. **容器与项目**：在Grid布局中，我们首先有一个容器（container），它...
grid.rar_grid布局
09-20
【标题】：“grid.rar_grid布局”指的是一个关于CSS Grid布局的示例，通过创建一个九宫格来展示其基本概念。这个压缩包包含了用于演示的HTML文件（grid.html）以及可能用于辅助理解的图片（1.jpg）。 【描述】：在...
Grid布局综合Demo案例
05-27
网格布局（Grid布局）是CSS3中的一个强大工具，它为网页设计提供了二维的、基于网格的布局系统，使得在创建复杂且响应式的页面布局时更加灵活和有序。本综合Demo案例将深入探讨如何利用Grid布局来实现各种复杂的网页...
grid布局demo.html
02-02
grid布局demo.html
CSS Grid 网格布局全解析
09-24
Grid布局摒弃了传统布局模式的限制，让我们可以自由地定义网页的行和列，以及网格内元素的位置，实现了内容与结构的分离。 在CSS Grid中，一个基本的网格系统由一个网格容器（grid container）和若干网格项（grid ...
grid设计辅助工具 通过图形化界面来辅助进行grid布局设计
最新发布
03-25
在IT行业中，Grid布局是一种强大的网页布局技术，它允许开发者以二维网格系统组织页面内容，提供了更为精确的控制力和可预测的响应式设计。在本主题中，我们将深入探讨"grid设计辅助工具"，这是一个专门用于简化Grid...
Python Grid使用和布局详解
09-20
在Python编程中，`Grid`布局管理器主要用于Tkinter库中的GUI（图形用户界面）开发。它是一种强大的工具，能够帮助开发者有效地组织和定位窗口小部件（widgets）。`Grid`布局管理器的工作原理是将窗口划分为一个二维...
5分钟教你学会 CSS Grid 布局
09-27
主要介绍了5分钟教你学会 CSS Grid 布局的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS Grid布局教程之什么是网格布局
09-25
在这篇文章中简单的介绍了CSS Grid Layout，以及为什么要使用他，并且介绍了其一些术语：网格线、网格轨道、网格单元格、网格区域和网格容器等，为后面如何学习和使用CSS Grid Layout做了一个铺垫。
弹性布局和grid布局
hbl020305的博客
07-26 361
弹性布局和grid布局
网页布局——grid弹性网格布局
weixin_30538029的博客
06-07 205
网格布局（Grid）是最强大的 CSS 布局方案。 Flexbox 是为一维布局设计的，而 Grid 是为二维布局设计。 grid目前兼容性目前还可以，主流浏览器对它的支持力度很大，ie9,10宣布它未来不久会对它有很好的支持，目前则需要使用过时的语法。我相信不久的将来grid将成为每一个前端工作人员必备的布局技能。 两者的另一个核心区别是Flexbox以内容为基础，Grid以布局为基础。 ...
弹性布局 display:grid
wendyNo的博客
11-08 151
​​​​ 每次写到这种两边对齐，中间间隔特别多的样式，都要花费一点时间。 今天尝试了一个新的样式：display：grid <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .page{ ...
CSS Grid布局详解与实例演示
特别关注了Flexbox和CSS Grid布局，这两种布局模式在现代网页设计中具有重要意义。此外，还介绍了Box Alignment以及CSS Grid System的计算公式，并通过CodePen代码实例展示了如何使用Grid计算单元格宽度。" CSS ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值