文档章节

CSS Grid布局

Allen-Liu
 Allen-Liu
发布于 2017/06/28 01:41
字数 933
阅读 10
收藏 0
CSS

CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式。

专业术语

在了解网格之前,需要对一些专业术语有所了解。在整个网格中常用到的术语有:网格线(Grid lines)、水平或纵向网格轨道(Grid tracks)。网格轨道其实就相当于行(rows)和列(columns),而且两者之间有一个间距(Gutters)。在网格轨道相交的区域,就是单元格(Grid cells),相当于table中的单元格。这些重要的术语能帮助我们更好的理解Grid。

Grid

如上图所示,一条条的粗体黑线就是网格线,其中的行或者列就是网格轨道,其中的一个个的格子就是单元格,网格区域是由任何四个网格线组成的区域,它可以包含任意数量的网格单元格。最后,两个网格轨道之间的区域称为间距,上图的间距为零。

网格容器属性(Grid Container)

display

定义一个元素成为网格容器,并对其内容建立一个网格格式的上下文。

当你使用Grid布局时,column, float, clear, 和 vertical-align 元素对网格容器不起作用。

属性值:

  • grid: 产生一个块级的网格
  • inline-grid: 产生内联级网格
display: grid;

网格项目默认放在行中,并且跨网格容器的全宽。

display: grid;

display: inline-grid;

网格项目默认放在行中,以子元素中最宽的宽度为网格宽度。

display: inline-grid;

grid-template-row

利用以空格分隔的值定义网格的列和行。值的大小代表轨道的大小,并且它们之间的空格表示网格线。

属性值:

  • <track-size>: 可以是一个长度、百分比或者是网格中自由空间的一小部分(使用fr单位)
  • <line-name>: 你选择的任意名称
  • subgrid - 如果你的网格容器本身就是一个网格项(即嵌套网格),你可以使用此属性指定行和列的大小继承于父元素而不是自身指定。
.container {
    grid-template-columns: [first start] 40px [line2] 50px [line3] 1fr [col4-start] 2fr [five] 1fr [end];
      grid-template-rows: [row1-start] 1fr [row1-end] 2fr [third-line] 1fr [last-line];
}

其中:

  • grid-template-columns: 每列的宽度,fr表示自适应宽度
  • grid-template-rows: 每行的宽度,fr同上

在上面的代码中,我们将一行分为5列,第一列的宽度为40px,第二列的宽度为50px,后面三列按1:2:1的比例均分剩下的宽度。将高度按照1:2:1的比例分为3行

其中[]里面的是网格线的名称,每条网格线可以有多个名称,只需将每个名称用空格分隔开来,像上面的代码中第一条竖着的网格线就有两个名字firststart

如果你的定义中包含重复的部分,你可以使用 repeat() 表示法进行精简:

.container{
    grid-template-columns: repeat(3, 20px [col-start]) 5%;
}

等价于:

.container{
    grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

minmax()

可以通过minmax()函数来创建网格轨道的最小或最大尺寸。

minmax()函数接受两个参数:第一个参数定义网格轨道的最小值,第二个参数定义网格轨道的最大值。可以接受任何长度值,也接受auto值。auto值允许网格轨道基于内容的尺寸拉伸或挤压。

grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;

输入图片说明

grid-gap

grid-gap是grid-row-gap和grid-column-gap两个属性的缩写。它有两个值的时候,第一个值是行间距,第二个值是列间距。当它只有一个值的时候说明行间距和列间距相等。

grid-gap: 20px 50px;

grid-gap

© 著作权归作者所有

上一篇: JDK安装与配置
下一篇: 观影清单
Allen-Liu
粉丝 1
博文 15
码字总数 5058
作品 0
成都
程序员
私信 提问
如何快速学习 CSS Grid 布局 - 相关资源和教程推荐

本文首发于:www.css88.com/archives/86… 这篇文章是 CSS Grid 布局有用的资源和教程,帮你快速了解相关知识。同时还比较了 CSS Grid 、 Flexbox 、 Table 布局之间的区别,及适用情况。 CS...

愚人码头
2018/10/29
0
0
如何使用Flexbox和CSS Grid,实现高效布局

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

powertoolsteam
2017/09/20
0
0
如何使用Flexbox和CSS Grid,实现高效布局

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

powertoolsteam
2017/09/20
0
0
CSS Grid #13:auto-fill 和 auto-fit 关键字

原文:CSS Grid #13: The auto-fill and auto-fit Keywords in CSS Grid, by Jorge Montoya。 导读: joomlashack.com 是一家为著名 CRM 系统 Joomla 提供扩展和模板的一家公司。未来 Joomla...

zhangbao90s
08/29
0
0
如何使用 CSS Grid 快速而又灵活的布局

css Grid 网格模块是创建网站非常棒的工具。它能使你快速的进行布局尝试。比你尝试的任何布局系统都好 首先,我将解释我们需要的 HTML 和 CSS ,我已经将其分解为四个部分。 一旦你了解了这些...

舒龙虎
2018/04/28
10
0

没有更多内容

加载失败,请刷新页面

加载更多

代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
12
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部