原文出自Arien的博客https://www.w3cplus.com/css3/line-base-placement-layout.html

首先定义一个网格

1.可以给父容器的display属性设置为grid或者inline-grid来定义一个网格。这样你就可以使用grid-template-columnsgrid-template-rows属性来创建一个网格。

.wrapper { display: grid; grid-template-columns: 100px 10px 100px 10px 100px; grid-template-rows: auto 10px auto; }

指定了列宽、列间距,行高和行间距等。

2.网格线的简写方式,其实就是grid-columngrid-rowstartend值合并在一起,两者之间用/来分隔。

.a{ grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; }

可简写为

.a{ grid-column: 1 / 2; grid-row: 1 / 2; }

3.在CSS Grid Layout中有一个关键东东,网格区域grid-area

网格区域他是由四条网格线组成的一个空间。

组成网格区域的网格线顺序是row-start/column-start/row-end/column-end。每个网格线之间也是使用/来分隔。

.a{ grid-area: 1 / 1 / 2 / 2; }

自定义网格线名称

CSS Grid Layout模块中还提供了自定义网格线名称,然后使用定义好的名称来制作网格布局。

.wrapper { display: grid; grid-template-columns: (col1-start) 100px (col1-end) 10px (col2-start) 100px (col2-end) 10px (col3-start) 100px (col3-end); }

.a{ grid-column: col1-start / col3-end; grid-row: row1-start; }

自定义网格线配合关键词span合并单元格

上面那种自定义网各线的方法好是好,但也有一个问题,如果网格线少,还是蛮方便的,不过网格一多,网格线也多起来,每条网格线都定义名称是不是太费时费力了。

其实在CSS Grid Layout中不需要这么做,你完全可以给网格线定义相同的名称,然后使用关键词span添加到特定的目标网格线。这种方法对于创建一些复杂的网格(包括多个网格与列间距)是非常方便的。

在实际使用中,可以在网格内容轨道前的网格线都定义为col,而在列间距轨道前的网格线都定义为gutter

在调用时,可以使用col <line number>来指定开始的网格线,配合关键词span <number of lines of that name>来指写网格的跨度。

.wrapper { display: grid; grid-template-columns: (col) 100px (gutter) 10px (col) 100px (gutter) 10px (col) 100px (gutter) 10px (col) 100px (gutter) 10px (col) 100px (gutter) 10px (col) 100px (gutter); grid-template-rows: (row) auto (gutter) 10px (row) auto (gutter) 10px (row) auto (gutter) 10px (row) auto; }

.a{ grid-column: col / span gutter 2; grid-row: row; } .b { grid-column: col 3 / span gutter 2; grid-row: row; }

repeat关键词

在上例中,不难发现列和行都有很多重复的,比如:列网格线有六个(col) 100px (gutter) 10px,而行网格线有四个(row) auto (gutter) 10px。其实在CSS Grid Layout没有必要这么痛苦,他提供了一个关键repeat,完全可以使用repeat来让你的代码变得更简洁。

使用repeat的代码如下:

.wrapper {
display: grid;
grid-template-columns:repeat(6, (col) 100px (gutter) 10px);
grid-template-rows: repeat(4, (row) auto (gutter) 10px );
}

css grid 随笔的更多相关文章

  1. CSS Grid layout布局

    CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.你只需要定义一个容器元素并设置display:grid,使用gr ...

  2. 各个浏览器开启CSS Grid Layout的方式

    2017年3月,Chrome.Firefox将开启默认支持. 当然对于很多人等不及浏览器默认支持,想提前体验一把,这里提供一些打开方式: 1.Chrome 在浏览器中输入:chrome://flags ...

  3. css小随笔(二)与通用样式

    51先在学校HTML5已经有半个多月了,然后这个星期做了一个京东的手机网站,接触到了通用样式,下面以京东的手机站为例 这两个就是京东手机站了的不同的两个板块,因为HTML5仅仅只是学完了基本标签跟cs ...

  4. 如何使用Flexbox和CSS Grid,实现高效布局

    CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想.幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来 ...

  5. CSS Grid 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

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

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

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

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

  8. CSS Grid 读书笔记

    基本概念 MDN上的解释是这样的 CSS Grid Layout excels at dividing a page into major regions or defining the relati ...

  9. CSS Grid 布局

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

随机推荐

  1. spring请求多方式

    <!-- 使表单可以使用GET,.POST. HEAD.OPTIONS.PUT.DELETE.TRACE方式提交--> <filter> <filter-name> ...

  2. 【深入理解JVM】类加载器与双亲委派模型 (转)

    出处: [深入理解JVM]类加载器与双亲委派模型 加载类的开放性 类加载器(ClassLoader)是Java语言的一项创新,也是Java流行的一个重要原因.在类加载的第一阶段“加载”过程中,需要通过 ...

  3. IDEA导入外部code style

    至于用何种代码风格, 根据自己团队规范来吧 提供一个Google的IDEA java风格吧 Github地址 原文地址:https://blog.csdn.net/sasuke__/article/d ...

  4. MySQL性能优化(四):SQL优化

    原文:MySQL性能优化(四):SQL优化 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/ ...

  5. 四、redis学习(案例)

    效果如下 注意:必须要开启redis服务器端 数据库 CREATE DATABASE heima; -- 创建数据库 USE heima; -- 使用数据库 CREATE TABLE province ...

  6. SpringBoot:spring boot使用Druid和监控配置

    Druid是Java语言中最好的数据库连接池,并且能够提供强大的监控和扩展功能. Spring Boot默认的数据源是:org.apache.tomcat.jdbc.pool.DataSource 业 ...

  7. Android官方网站!

    Android官方网站,所有Android相关文档.官方工具.示例,全部都在上面!! http://www.android.com/

  8. 内存不足导致mysql关闭,CentOS6.5增加swap分区

    某日发现mysql自动关闭了,查找错误日志发现以下错误 2017-07-14 13:07:30 5494 [Note] InnoDB: Initializing buffer pool, size = ...

  9. traceback:让你更加灵活地处理python的异常

    异常 异常在python中是屡见不鲜了,程序在执行到某一行代码时,发现有问题,比如数组索引越界,变量没有定义啊等等,此时就会抛出异常 捕获异常 在python,一般都是使用try···except来对 ...

  10. c++的并发操作(多线程)

    C++11标准在标准库中为多线程提供了组件,这意味着使用C++编写与平台无关的多线程程序成为可能,而C++程序的可移植性也得到了有力的保证.另外,并发编程可提高应用的性能,这对对性能锱铢必较的C++程 ...