你的位置:首页 > 软件开发 > 网页设计 > grid栅格布局

grid栅格布局

发布时间:2017-06-28 00:01:20
前面的话  Grid布局方式借鉴了平面装帧设计中的格线系统,将格线运用在屏幕上,而不再是单一的静态页面,可以称之为真正的栅格。本文将详细介绍grid布局 引入  对于Web开发者来说,网页布局一直是个比较重要的问题。但实际上,在网页开发很长的一段时间当中,我们甚至没有一个比较 ...

grid栅格布局

前面的话

  Grid布局方式借鉴了平面装帧设计中的格线系统,将格线运用在屏幕上,而不再是单一的静态页面,可以称之为真正的栅格。本文将详细介绍grid布局

 

引入

  对于Web开发者来说,网页布局一直是个比较重要的问题。但实际上,在网页开发很长的一段时间当中,我们甚至没有一个比较完整的布局模块。总的来说 Web 布局经历了以下四个阶段:

  1、table表格布局,通过 Dreamweaver 拖拽表格或者手写 table 标签布局

  2、float浮动及position定位布局,借助元素元素盒模型本身的特性以及 float position 等属性等进行布局

  3、flex弹性盒模型布局,革命性的突破,解决传统布局方案上的三大痛点 排列方向、对齐方式,自适应尺寸。是目前最为成熟和强大的布局方案

  4、grid栅格布局,二维布局模块,具有强大的内容尺寸和定位能力,适合需要在两个维度上对齐内容的布局

  Grid Layout 是一种基于二维网格的布局系统,旨在完全改变我们设计基于网格的用户界面的方式,弥补网页开发在二维布局能力上的缺陷

  与flex分为伸缩容器和伸缩项目类似,grid也分为网格容器和网格项目

 

网格容器

display

  通过display属性设置属性值为grid或inline-grid可以创建一个网格容器。网格容器中的所有子元素就会自动变成网格项目(grid item)

display: griddisplay: inline-grid

  可以在方括号中添加多个名称来命名网格线名称,使用多外名称命名网格线名称时,名称间要用空格隔开。每一个网格线的名称可以用来定位网格项目的位置

grid-template-rows: [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end]; grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end];

  使用相同的网格线名称可以设置网格项目的位置。网格线的名称和数字之间需要用空格分开 

grid-row: row-start 2 / row-end 3;grid-column: col-start / col-start 3;

  grid-row-start、grid-row-end、grid-column-start和grid-column-end以及简写的grid-row、grid-column、grid-area都可以引用网格区域名称,用来设置网格项目位置

 

隐式网格

【grid-auto-flow】

  网格默认流方向是row,可以通过grid-auto-flow属性把网格流的方向改变成column   

grid-auto-flow: column

 

隐式命名

【隐式命名网格区域名称】

  通常可以将网格线命名成任何想命名的名称,如果网格线名称添加-start和-end的后缀,其实也隐式的创建一个网格区域,可以用来设置网格项目的位置

grid-template-rows:  [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end];grid-template-columns: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [inner-end];

【隐式命名网格线名称】

  隐式的指定网格线反向指定了隐式的网格区域名称,命名的网格区域隐式的命名了网格线名称 

grid-template-areas:  "header header" "content sidebar" "footer footer";grid-template-rows:  80px 1fr 40px;grid-template-columns: 1fr 200px;
grid-row-start: header-start; grid-row-end: content-start; grid-column-start: footer-start; grid-column-end: sidebar-end;

 

网格项目层级

  网格项目可以具有层级和堆栈,必要时可能通过z-index属性来指定 

.item-1,.item-2 {  grid-row-start: 1;  grid-column-end: span 2;}.item-1 {   grid-column-start: 1;   z-index: 1; }.item-2 {   grid-column-start: 2 }

原标题:grid栅格布局

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录