CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素(成为 Grid Items 网格项),你就可以轻松使用 Grid(网格) 布局。

简介

CSS Grid(网格) 布局(又称为 “Grid(网格)” ),是一个二维的基于网格的布局系统它的目标是完全改变我们基于网格的用户界面的布局方式。CSS 一直用来布局我们的网页,但一直以来都存在这样或那样的问题。一开始我们用表格(table),然后是浮动(float),再是定位(postion)和内嵌块(inline-block),但是所有这些方法本质上都是只是 hack 而已,并且遗漏了很多重要的功能(例如垂直居中)。Flexbox 的出现很大程度上改善了我们的布局方式,但它的目的是为了解决更简单的一维布局,而不是复杂的二维布局(实际上 Flexbox 和 Grid 能结合在一起工作,而且配合得非常好)。Grid(网格) 布局是第一个专门为解决布局问题而创建的 CSS 模块,我们终于不需要想尽办法hack 页面布局样式了。

基础知识和浏览器支持

首先,你必须使用 display: grid 将容器元素定义为一个 grid(网格) 布局,使用 grid-template-columns 和 grid-template-rows 设置 列 和 行 的尺寸大小,然后通过 grid-column 和 grid-row 将其子元素放入这个 grid(网格) 中。与 flexbox 类似,网格项(grid items)的源顺序无关紧要。你的 CSS 可以以任何顺序放置它们,这使得使用 媒体查询(media queries)重新排列网格变得非常容易。定义整个页面的布局,然后完全重新排列布局以适应不同的屏幕宽度,这些都只需要几行 CSS ,想象一下就让人兴奋。Grid(网格) 布局是有史以来最强大的CSS模块之一。

截至2017年3月,许多浏览器都提供了对 CSS Grid 的原生支持,而且无需加浏览器前缀:Chrome(包括 Android ),Firefox,Safari(包括iOS)和 Opera 。 另一方面,Internet Explorer 10和11支持它,但是是一个过时的语法实现。 Edge 已经宣布支持,但还没有到来。(愚人码头注:翻译这篇文章时,Edge 16 已经支持)。

CSS Grid 布局完全指南(图解 Grid 详细教程)

5分钟学会 CSS Grid 布局

如何使用 CSS Grid 快速而又灵活的布局

CSS Grid 布局的更多相关文章

  1. CSS Grid 布局完全指南(图解 Grid 详细教程)

    CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...

  2. 快速使用CSS Grid布局,实现响应式设计

    常用Grid布局属性介绍 下面从一个简单Grid布局例子说起. CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格 ...

  3. CSS Grid布局指南

    简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.如我们所知,CSS 总是用于网页的样式设置,但它并没有起到 ...

  4. CSS Grid 布局学习笔记

    CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...

  5. 5分钟学会 CSS Grid 布局

    欢迎加入前端交流群交流知识&&获取视频资料:749539640 这是一篇快速介绍网站未来布局的文章. Grid 布局是网站设计的基础,CSS Grid 是创建网格布局最强大和最简单的工 ...

  6. css Grid布局

    CSS Grid 布局完全指南(图解 Grid 详细教程)https://www.html.cn/archives/8510#prop-grid-gap 5分钟学会 CSS Grid 布局https: ...

  7. 带你入门 CSS Grid 布局

    前言 三月中旬的时候,有一个对于 CSS 开发者来说很重要的消息,最新版的 Firefox 和 Chrome 已经正式支 CSS Grid 这一新特性啦.没错:我们现在就可以在最流行的两大浏览器上玩转 ...

  8. 用 CSS Grid 布局制作一个响应式柱状图

    最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...

  9. CSS Grid 布局(Grid Layout)完全指南 #flight.Archives003

    Title/ CSS Grid 布局(Grid Layout)完全指南 #flight.Archives003 序 : 写完这篇文章后,我准备一直做下去了,包括flight的各个分区,也看到前方的路. ...

随机推荐

  1. Shell变量的取用、删除、取代与替换

    <<鸟哥的私房菜>> 注意: 通配符适用的地方:shell命令行或者shell脚本中 正则表达式适用的地方:字符串处理时,一般有一般正则和Perl正则. 在文本过滤工具里,都是 ...

  2. django 执行 python manage.py makemigrations 报错

    RuntimeError: Model class app_anme.models.xxx doesn't declare an explicit app_label and isn't in an ...

  3. How the Bitcoin protocol actually works

    sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&a ...

  4. C和C++的区别和联系

    关于C和C++的区别是面试中经常会被问到的问题,本着即将面试的心态,进行知识整理,并对小知识点进行扩展: C/C++的联系: C++是C的超集,兼容大部分C的语法的结构: 联系嘛我只能想到这个,毕竟c ...

  5. u-boot移植(十三)---代码修改---支持文件系统及补丁制作

    一.烧写文件系统 1.1 jffs2烧写 1.下载文件系统:tftp 30000000 fs_mini_mdev.jffs2 2.擦除文件的块:nand erase.part rootfs 3.烧入文 ...

  6. 【BZOJ4827】【HNOI2017】礼物

    强省HN弱省HA……(读作强省湖南弱省蛤 原题: 我的室友最近喜欢上了一个可爱的小女生.马上就要到她的生日了,他决定买一对情侣手 环,一个留给自己,一 个送给她.每个手环上各有 n 个装饰物,并且每个 ...

  7. dbeaver can't connect HBase1.2 using phoenix driver #1863

    1 第一个问题 Unexpected version format: 10.0.2 Unexpected version format: 10.0.2 Unexpected version forma ...

  8. 2018-2019-2 网络对抗技术 20165227 Exp1 PC平台逆向破解

    2018-2019-2 网络对抗技术 20165227 Exp1 PC平台逆向破解 实验内容及步骤 实验一:直接修改程序机器指令,改变程序执行流程 知识要求:Call指令,EIP寄存器,指令跳转的偏移 ...

  9. session和token

    功能是一样的,都是要与浏览器建立连接,获取与客户端对应的用户数据,只不过完成这个功能的实现方式不太一样. 本质上的区别: session的使用方式是客户端cookie里存id,服务端session存用 ...

  10. Linux性能分析的前60000毫秒【转】

    Linux性能分析的前60000毫秒 为了解决性能问题,你登入了一台Linux服务器,在最开始的一分钟内需要查看什么? 在Netflix我们有一个庞大的EC2 Linux集群,还有非常多的性能分析工具 ...