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”。

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

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

相关内容

热门资讯

幼儿园毕业典礼主持稿开场白 　　幼儿园大班孩子即将挥别母校，那么在毕业典礼上应该如何说好主持词呢，以下是CN人才小编搜集并整理的...
小班元旦主持词 导语：幼儿园举办元旦晚会主持词怎么说？以下是小编整理的小班元旦主持词，欢迎阅读参考。小班元旦主持词a...
公司结训主持词 公司结训主持词　　主持词要根据活动对象的不同去设置不同的主持词。时代不断在进步，各种场合中活跃现场气...
读书分享会的精彩主持词 读书分享会的精彩主持词　　由主持人于节目进行过程中串联节目的串联词。如今的各种演出活动和集会中，主持...
幼儿园运动会入场主持词 有关幼儿园运动会入场主持词（精选12篇）　　契合现场环境的主持词能给集会带来双倍的效果。随着社会一步...
毕业30年同学聚会致辞 毕业30年同学聚会致辞　　毕业30年同学聚会致辞　　　　2013年7月13日下午在吉安市林业局食堂三...
报告会主持词 【精选】报告会主持词4篇　　主持词没有固定的格式，他的最大特点就是富有个性。在当今中国社会，主持成为...
过界男女的经典台词及微影评 过界男女的经典台词及微影评　　过界男女经典台词　　1、因为李先生的户口被冻结了，所以暂时不能为你办理...
中秋节商务贺卡祝词 中秋节商务贺卡祝词把酝酿已久的创意交给秋风，任其去演绎相思的旋律；让翘盼团聚的心跃上太空，在月宫桂树...
谢师宴酒席致辞 谢师宴酒席致辞（精选5篇）　　无论是在学校还是在社会中，说到致辞，大家肯定都不陌生吧，致辞具有“礼仪...
快板书武松打虎台词 快板书武松打虎台词　　快板书是起源于山东省汉族传统曲艺形式，具有一百多年的历史。它最早流行于山东、华...
学校元旦晚会开场白主持词 学校元旦晚会开场白主持词　　根据活动对象的不同，需要设置不同的主持词。在一步步向前发展的社会中，越来...
长辈证婚人证婚词 长辈证婚人证婚词各位领导、各位来宾、各位朋友、女士先生们：大家好！华灯初放、嘉宾盈门，我怀着兴奋的心...
元宵节主持词 元宵节主持词15篇　　主持词要根据活动对象的不同去设置不同的主持词。在如今这个时代，各种场合中活跃现...
宗亲联谊大会主持词 宗亲联谊大会主持词　　主持词要注意活动对象，针对活动对象写相应的主持词。在人们越来越多的参与各种活动...
和谐之声新春联欢会主持台词稿 和谐之声新春联欢会主持台词稿　　(联欢会开场前60分钟内，所有接待、服务、道具、灯光、音响、服装、化...
遗体告别主持词 2021遗体告别主持词范文（通用5篇）　　主持词是各种演出活动和集会中主持人串联节目的串联词。在当下...
颁奖典礼主持词 关于颁奖典礼主持词（通用5篇）　　主持词是各种演出活动和集会中主持人串联节目的串联词。在各种集会、活...
高中学生家长会主持词 高中学生家长会主持词汇编　　许多家长把注意力集中在孩子的学习上，其实，作为家长更应该从侧面关心孩子的...
公司元旦晚会活动主持词 公司元旦晚会活动主持词　　主持词分为会议主持词、晚会主持词、活动主持词、婚庆主持词等。现今社会在不断...