原文出自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. Maximum XOR Sum 系列问题

    给定 $n$ 个两两不同的正整数 $a_1, a_2, \dots, a_n$,$a_i < 2^k$ . Problem 1(经典问题) 求 $a_i \xor a_j$ 的最大值,$ 1\l ...

  2. <<C++ Primer>> 第 7 章 类

    术语表 第 7 章 类 抽象数据类型(abstract data type): 封装(隐藏)了实现细节的数据结构.    访问说明符(access specifier): 包括关键字 public 和 ...

  3. Postman之获得登录的token,并设置为全局变量

    1.调通登录接口(可以参考上篇博客) 网址:Postman之简单使用 2.粘贴以下代码到Tests中 //把json字符串转化为对象 var data=JSON.parse(responseBody) ...

  4. command----常用命令更新ing

    common commands 1:split---拆分文件 [root@localhost split]# split -b 1M split.tar.gz split_ #按1M拆分文件 [roo ...

  5. 不基于比较的排序算法:Counting-sort和Radix-sort

  6. 爬取YY评级信息

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @File : 爬取YY评级基本信息.py # @Author: lattesea # @Date : ...

  7. 关于CSRF 和 csrftoken

    CSRF 虽然利用了session验证机制的漏洞,一般使用加密token的方式防御,但是其本身和session以及JWT token没有直接联系. 描述 CSRF利用用户正常登录产生的cookie,利 ...

  8. ccs之经典布局(一)(水平垂直居中)

    经典的css布局有以下几种,下面分别用不同的方法进行实现且进行对比. 一.水平居中 水平居中布局指的是当前元素在父级元素的容器中,水平方向上显示的是居中的,有以下几种方式来完成布局: 1.margin ...

  9. react 不同环境配置不同域名

    npm eject 先将配置文件暴露出来 将scripts中的build文件复制一份,改名为你需要的名字 将其中的 process.env.NODE_ENV 赋值为你需要的环境 在package.js ...

  10. symfony2学习笔记——控制器

    //获取get过来的参数 $val = $request->query->get('aaa'); //获取post过来的参数 //$val = $request->request-& ...