grid目前兼容性目前还可以，主流浏览器对它的支持力度很大，ie9,10宣布它未来不久会对它有很好的支持，目前则需要使用过时的语法。我相信不久的将来grid将成为每一个前端工作人员必备的布局技能。

属性介绍

1.父元素上的属性

属性 说明
display 设置grid布局
grid-template-rows 设置网格的行数
grid-template-columns 设置网格的列数
grid-template-areas 根据子元素的网格名字来排列
grid-column-gap 用来指定竖网格轨道的大小
grid-row-gap 用来指定行网格轨道的大小
grid-gap grid-column-gap和grid-row-gap这两个属性的缩写方式
justify-items 网格中所有单元格中的内容在X轴的对齐方式
align-items 网格中所有单元格中的内容在Y轴的对齐方式
justify-content 来设置整个网格在网格容器中的X轴的排列方式
align-content 来设置整个网格在网格容器中的Y轴的排列方式
grid-auto-columns 设定隐藏的网格的高
grid-auto-rows 设定隐藏的网格的宽
grid-auto-flow 在布局的时候，选择网格填充的方法

2.设置子元素上的属性

属性 说明
grid-area 给单个子元素起名字
grid-column-start 元素的位置哪跟竖线开始
grid-column-end 哪跟竖线结束
grid-row-start 哪跟横线开始
grid-row-end 哪跟横线结束
grid-row grid-row-start和grid-row-end的缩写
grid-column grid-column-start和grid-column-end这两个属性的缩写方式
grid-area grid-row和grid-column的缩写
justify-self 设置单个子元素在其所在的小网格中的X轴排列方式
align-self 设置单个子元素在其所在的小网格中的Y轴排列方式
align-content 来设置整个网格在网格容器中的Y轴的排列方式

网页布局——grid语法属性详解的更多相关文章

  1. css之Grid Layout详解

    css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...

  2. Android组件---四大布局的属性详解

    [声明] 欢迎转载,但请保留文章原始出处→_→ 文章来源:http://www.cnblogs.com/smyhvae/p/4372222.html Android常见布局有下面几种: LinearL ...

  3. LigerUI之Grid使用详解(三)——字典数据展示

    一.问题概述 在开发web信息管理系统时,使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果,而且能够解决大多数浏览器兼容问题,提升开发效率.在关于LigerGrid的前两篇的内容里,给大家 ...

  4. Flex 布局——语法属性详解

    前言 Flexbox 是 flexible box 的简称(注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式.它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现 ...

  5. css3伸缩布局中justify-content详解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 弹性盒布局display:flex详解

    一:弹性盒子 随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置, ...

  7. CSS布局(四) float详解

    一.float设计初衷 因为float被设计出来的初衷是用于--文字环绕效果.即,一个图片一段文字,图片float:left之后,文字会环绕图片. <div style="width: ...

  8. tkinter之grid布局管理器详解

    在很久之前,我发过一篇<tkinter模块常用参数>,里面已经几乎涵盖了tkinter的大部分教程. 好吧,其实也就是上一篇而已啦. 所谓布局,就是指控制窗体容器中各个控件(组件)的位置关 ...

  9. Python基础=== Tkinter Grid布局管理器详解

    本文转自:https://www.cnblogs.com/ruo-li-suo-yi/p/7425307.html          @ 箬笠蓑衣 Grid(网格)布局管理器会将控件放置到一个二维的表 ...

随机推荐

  1. 【Offer】[64] 【求1+2+...+n】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 求1+2+...+n,要求不能使用乘除法.for. while if else. switch. case等关键字及条件判断语句( A? ...

  2. java8函数式接口详解、函数接口详解、lambda表达式匿名函数、方法引用使用含义、函数式接口实例、如何定义函数式接口

    函数式接口详细定义 函数式接口只有一个抽象方法 由于default方法有一个实现,所以他们不是抽象的. 如果一个接口定义了一个抽象方法,而他恰好覆盖了Object的public方法,仍旧不算做接口的抽 ...

  3. 前端利器躬行记（5）——Git

    Git是一款开源的分布式版本控制系统,它的出现和Linux紧密相关.Linux内核项目组为了能更好地管理和维护Linux内核开发,于2002年开始启用商业的分布式版本控制系统BitKeeper.虽然软 ...

  4. HABSE表结构理解

    也分为行列,行是索引,锁定数据,查找数据只能通过行 列:建表时必须知道列族,真实列(列簇)在插入数据时候可以指定        查找指定列,必须带列族,列族1:name

  5. OPC-System.Runtime.InteropServices.COMException:“Error HRESULT E_FAIL has been returned from a call to a COM component.”

    Error HRESULT E_FAIL has been returned from a call to a COM component的错误提示,还是因为OPC配置,这次是红框中标签定义错误,应该 ...

  6. Git 从入门到熟练|不敢说精通

    前言 如果有一定版本管理软件基础或使用过 svn 的你,这篇 git 的文章应该是最适合你的.作者也是从 svn 过来,从开始的觉得 git 麻烦,到最后还是感觉 git 是最好用的版本控制软件. 虽 ...

  7. 谈谈HTTPS安全认证，抓包与反抓包策略

    文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. 协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则,超文本传输协议(HTTP)是一种通信 ...

  8. 如何更规范化使用MySQL

    如何更规范化使用MySQL 背景:一个平台或系统随着时间的推移和用户量的增多,数据库操作往往会变慢:而在Java应用开发中数据库更是尤为重要,绝大多数情况下数据库的性能决定了程序的性能,如若前期埋下的 ...

  9. linux文件系统分区、格式化、挂载、卷标挂载、永久挂载

    思想不放松你的行为就不会放松,你的行为放松了,说明你的思想放松了.

  10. [Code] 变态之人键合一

    目的也比较单纯,选一门语言,走向人键合一. 选了两本书作为操练场:<精通Python设计模式>.<Data Structure and Algorithm in Python> ...