首页>HTML5>正文

CSS3 网格布局(grid-layout)基础知识 - 网格模板属性(grid-template)使用说明

时间:2017-07-10 17:39:47   来源:山西尚学堂   阅读:
CSS3引入了新的网格布局(grid layout),以适应显示和设计技术的发展(尤其是移动设备优先的响应式设计)。

主要目标是建立一个稳定可预料且语义正确的网页布局模式,用来替代过往表现不稳定且繁琐的table、flow以及JS脚本混合技术来实现的网页动态布局。

 

本文将简单而准确的介绍网格布局属性的基本概念和使用方法。

1. 概述

网格模板区域(grid-template-areas)、网格模板行(grid-template-rows)和网格模板列(grid-template-columns),这3个属性共同显式定义了一个网格容器。

而网格模板(grid-template)属性是一个用来同时设置这3个属性的速写(shorthand)。 grid items内容可能会超出显式网格,这时网格容器会自动生成隐式轨道(implicit track),这些隐式轨道的尺寸由 grid-auto-rows 和 grid-auto-columns 属性所确定。

显式网格的大小是由网格模板区域定义的行/列数以及在网格模板行/网格模板列属性定义了尺寸的行/列数中的较大者决定的。 

任何由网格模板区域定义的行或列但没有在网格模板行/网格模板列中定义尺寸,则由grid-auto-rows或grid-auto-columns属性来确定大小。

如果没有定义显式轨道,显式网格依然在每根轴线上包含一个网格线。

网格定位(grid-placement)属性中的数字索引从显式网格的边缘开始计算。如果从起始侧开始,索引为以1开始的正数。反之从结束侧开始,则为以-1开始的负数。

 

2. 轨道尺寸:grid-template-rows 和 grid-template-columns

 

这两个属性用来定义一组空格分开的轨道列表(track list),轨道列表本身使用网格线名称和轨道尺寸函数来定义。 

轨道尺寸函数可以是具体的长度、相对于网格容器的百分比、按实际填充内容计算(如min-content)或者可用空间片段。

它还可以通过minmax(min,max)函数来指定一个长度范围,也就是介于min和max之间的一个尺寸,其中min/max参数同样可以使用前面提到的这些尺寸定义方式。

grid-template-columns属性指定网格列的轨道列表,而grid-template-rows属性指定网格行的轨道列表。

3. 命名区域:grid-template-areas属性

 

分享:0

电话咨询

客服热线服务时间

周一至周五 9:00-21:00

周六至周日 9:00-18:00

咨询电话

0354-3052381

13593182599(程老师)

13353541028(刘老师)

微信扫一扫