原文出自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. Java 中的动态代理

    一.概述 1. 什么是代理 我们大家都知道微商代理,简单地说就是代替厂家卖商品,厂家“委托”代理为其销售商品.关于微商代理,首先我们从他们那里买东西时通常不知道背后的厂家究竟是谁,也就是说,“委托者” ...

  2. 最好用linux版QQ

    这个版本的qq是见过linux下做好用的qq,希望对大家有用; 安装简单,qq易用,不卡死,可以接收文件. 安装过程如下: git clone https://gitee.com/wszqkzqk/d ...

  3. cut--修剪小能手

    cut命令 cut原理:以每一行位一个处理对象. 参数选项 解释说明 -b 以字节为单位进行分割 -c 以字符为单位进行分割(对切割中文有奇效) -d 自定义分隔符号,默认以tab为分隔符 1:-b ...

  4. java web实现同一账号在不同浏览器不能同时登录

    网上看了很多方法,个人也看了,自己也总结了几个比较常用的: 前提都是用session监听器,对session的创建与销毁进行监听 一.在用户登录时保存该用户的状态有这几种保存方式: 1.保存到内存中( ...

  5. calc,support,media各自的含义及用法

    @support:用于检测浏览器是否支持CSS某个属性,即条件判断,如果支持某个属性,可以写一套样式,如果不支持某属性,提供另一套样式作为替补. calc():用于计算动态函数值,支持“+”,“-”, ...

  6. PHP进阶书籍

    [初阶](基础知识及入门) 01. <PHP与MySQL程序设计(第4版)>  http://item.jd.com/10701892.html 02. <深入浅出MySQL 数据库 ...

  7. 使用transform属性和animation属性制作跳动的心

    transform属性允许我们对元素进行旋转.缩放.移动和倾斜: animation属性允许我们对元素实现一些动画效果: 跳动的心源码 <!DOCTYPE html> <html l ...

  8. 禁止antd Input.Password浏览器自动回传

    设置autoComplete为new-password

  9. mybatis原理解析

    本文是结合spring-mybatis整合进行的分析 1.先看看依赖的jar包: <dependency> <groupId>org.mybatis</groupId&g ...

  10. C语言字符串操作小结

    1)字符串操作strcpy(p, p1) 复制字符串strncpy(p, p1, n) 复制指定长度字符串strcat(p, p1) 附加字符串strncat(p, p1, n) 附加指定长度字符串s ...