Grid网格布局简单梳理
2021/8/24 23:06:10
本文主要是介绍Grid网格布局简单梳理,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Grid 网格布局是一种强大的前端布局方案,相比于flex弹性布局,grid更高效简洁。相关语法规则可参考CSS Grid 网格布局教程
整体梳理
Grid布局将整个区域划分成一个个网格,区域内的元素可以根据网格来指定位置,下面是一个简单的示意图。
先抛开看起来很多的grid属性,我们从自己的需求出发,看自己需要什么。网格内容在容器中怎么对齐?网格怎么划分?元素在网格内怎么对齐?怎么指定某个元素的特定位置?怎么实现一个元素占据多个格子?再结合下面这张图,应该会对grid属性的大致情况有一个了解。
至于具体的写法、工具方法、关键字,使用的时候去了解即可。CSS Grid 网格布局教程此教程已经很详细,不再重复。
实例
1、圣杯布局
<div class="grid-container"> <div class="header"></div> <div class="left"></div> <div class="content"></div> <div class="right"></div> <div class="footer"></div> </div>
.grid-container { width: 1000px; height: 800px; display: grid; grid-template-columns: 200px 600px 200px; grid-template-rows: 60px 680px 60px; grid-template-areas: "header header header" "left content right" "footer footer footer"; } .header { background-color: #87CEFF; width: 100%; height: 100%; grid-area: header; } .left { background-color: #FFC1C1; width: 100%; height: 100%; } .content { background-color: #FFDAB9; width: 100%; height: 100%; } .right { background-color: #FFEC8B; width: 100%; height: 100%; } .footer { background-color: #AB82FF; width: 100%; height: 100%; grid-area: footer; }
2、水平垂直居中
<div class="grid-container"> <div class="grid-item"></div> </div>
.grid-container { width: 300px; height: 300px; border: 1px solid gray; display: grid; place-content: center; } .grid-item { width: 100px; height: 100px; background-color: #87CEFF; }
缺点
目前grid布局的唯一缺点就是兼容性问题,尤其是IE浏览器兼容性很差,需要根据具体业务场景选择是否使用。
Grid Layout各浏览器兼容情况
这篇关于Grid网格布局简单梳理的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-01为什么公共事业机构会偏爱 TiDB :TiDB 数据库在某省妇幼健康管理系统的应用
- 2024-04-26敏捷开发:想要快速交付就必须舍弃产品质量?
- 2024-04-26静态代码分析的这些好处,我竟然都不知道?
- 2024-04-26你在测试金字塔的哪一层?(下)
- 2024-04-26快刀斩乱麻,DevOps让代码评审也自动起来
- 2024-04-262024年最好用的10款ER图神器!
- 2024-04-2203-为啥大模型LLM还没能完全替代你?
- 2024-04-2101-大语言模型发展
- 2024-04-17基于SpringWeb MultipartFile文件上传、下载功能
- 2024-04-14个人开发者,Spring Boot 项目如何部署