CSS-Grid（网格）布局
创始人
2024-05-27 16:09:12
0次

前言

之前HTML 页面的布局基本上都是通过 Flexbox 来实现的，能轻松的解决复杂的 Web 布局。 现在又出现了一个构建 HTML 最佳布局体系的新竞争者。就是强大的CSS Grid 布局。

grid和flex区别是什么？适用什么场景？

  1. Flexbox 是一维布局系统，适合做局部布局，比如导航栏组件。
  2. Grid 是二维布局系统，通常用于整个页面的规划。
  3. 二者从应用场景来说并不冲突。虽然 Flexbox 也可以用于大的页面布局，但是没有 Grid 强大和灵活。二者结合使用更加轻松。

特点：

  1. 固定和灵活的轨道尺寸；
  2. 可以使用行号，名称或通过定位网格区域将项目放置在网格上的精确位置；
  3. 可以将多个项目放入网格单元格或区域中，它们可以彼此部分重叠。

缺点：

兼容性比较差。

简单画一张图：

flex布局：

grid布局：

 

网格列

网格元素的垂直线方向称为列。

网格行

网格元素的水平线方向称为行。

网格间距

网格间距指的是两个网格单元之间的网格横向间距或网格纵向间距。

我们可以使用以下属性给元素调整间隙的大小

  • grid-column-gap
  • grid-row-gap
  • grid-gap

我们之前使用的弹性布局 一次只能处理一个维度上的元素布局，一行或者一列。

而现在的grid布局（网格布局）可以更自由的去设置一个容器所站的位置 

例如：

如果使用flex布局去实现排版方法就需要嵌套很多个div去一块一块的区分这些

而现在使用grid布局的话，可以省下很多div的布局，直接将元素所站的位置区分开

基础示例：

使用grid布局实现图中排版：


grid
1
2
3
4
5
6
7

我们只需要在父元素中添加display:grid;属性，其元素下的子元素就会跟着变

 fr：他是grid布局中的专属属性，用来平均分配容器所占位置

示例：

如图所示，这种布局方式使用弹性布局来实现相对来说是比较麻烦的，但我们使用grid布局就简单很多了

代码如下：


Grid
这是头部导航
这里内容区域
内容1
内容2
这里是底部

 grid布局属性：

参考某教程：grid布局

总结：

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Grid 可以做Flexbox做不了的事，Flexbox 比 Grid 兼容性更好，他们可以共同工作。Grid item可以成为flexbox容器，flex item可以成为grid 容器。

可以根据业务场景需要选择相应布局。

侵删

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：【王道数据结构】第八章 | 排序

下一篇：数据结构之算法的时间复杂度和空间复杂度

相关内容

热门资讯

常用商务英语口语 　　商务英语是以适应职场生活的语言要求为目的，内容涉及到商务活动的方方面面。下面是小编收集的常用商务...
六年级上册英语第一单元练习题 　　一、根据要求写单词。　　1.dry（反义词）__________________　　2.writ...
复活节英文怎么说 复活节英文怎么说?复活节的英语翻译是什么?复活节：Easter;"Easter,anniversar...
2008年北京奥运会主题曲 2008年北京奥运会(第29届夏季奥林匹克运动会)，2008年8月8日到2008年8月24日在中华人...
英语道歉信 英语道歉信15篇　　在日常生活中，道歉信的使用频率越来越高，通过道歉信，我们可以更好地解释事情发生的...
六年级英语专题训练(连词成句... 六年级英语专题训练(连词成句30题)　　1. have,playhouse,many,I,toy,i...
上班迟到情况说明英语 　　每个人都或多或少的迟到过那么几次，因为各种原因，可能生病，可能因为交通堵车，可能是因为天气冷，有...
小学英语教学论文 小学英语教学论文范文　　引导语：英语教育一直都是每个家长所器重的，那么有关小学英语教学论文要怎么写呢...
英语口语学习必看的方法技巧 英语口语学习必看的方法技巧如何才能说流利的英语？ 说外语时，我们主要应做到四件事：理解、回答、提问、...
四级英语作文选:Birth ... 四级英语作文范文选:Birth controlSince the Chinese Governmen...
金融专业英语面试自我介绍 金融专业英语面试自我介绍3篇　　金融专业的学生面试时，面试官要求用英语做自我介绍该怎么说。下面是小编...
我的李老师走了四年级英语日记... 我的李老师走了四年级英语日记带翻译　　我上了五个学期的小学却换了六任老师，李老师是带我们班最长的语文...
小学三年级英语日记带翻译捡玉... 小学三年级英语日记带翻译捡玉米　　今天，我和妈妈去外婆家，外婆家有刚剥的`玉米棒上带有玉米籽，好大的...
七年级英语优秀教学设计 七年级英语优秀教学设计　　作为一位兢兢业业的人民教师，常常要写一份优秀的教学设计，教学设计是把教学原...
我的英语老师作文 我的英语老师作文（通用21篇）　　在日常生活或是工作学习中，大家都有写作文的经历，对作文很是熟悉吧，...
英语老师教学经验总结 英语老师教学经验总结（通用19篇）　　总结是指社会团体、企业单位和个人对某一阶段的学习、工作或其完成...
初一英语暑假作业答案 初一英语暑假作业答案　　英语练习一(基础训练)第一题1.D2.H3.E4.F5.I6.A7.J8.C...
大学生的英语演讲稿 大学生的英语演讲稿范文（精选10篇）　　使用正确的写作思路书写演讲稿会更加事半功倍。在现实社会中，越...
VOA美国之音英语学习网址 VOA美国之音英语学习推荐网址 美国之音网站已经成为语言学习最重要的资源站点，在互联网上还有若干网站...
商务英语期末试卷 Part I Term Translation (20%)Section A: Translate ...