CSS3 Grid Layout

Web页面的布局,我们常见的主要有“浮动布局(float)”、“定位布局(position)”、“行内块布局(inline-block)”、“CSS3的多栏布局(Columns)”、“伸缩布局(Flexbox)”以及“网格布局(Grids)”等,在众多布局方法中,大家最为熟悉的就是浮动布局和网格布局,并且使用不同的细节能得到不同的布局效果。虽然这些布局能让大家实现常见的布局效果,但在实际中还是存在不少的问题,比如说浏览器的兼容性、修改显示顺序需要调整文档结构等。那么有没有什么更好的,更理想的布局方法?这也就是今天要和大家一起学习的一个布局模式——CSS3 Grid Layout

今天说的CSS3 Grid Layout并不是我们以前接触的一些网格,例如960gs。这个网格是CSS3为布局新添加的一个布局模块。下面我们根据W3C官网发布的内容,先了解一些CSS3 Grid Layout知识。

摘要

CSS3 Grid Layout是一个新的模块,这个模块主要定义一个二维网格布局系统,用来优化用户界面设计。在这个网格布局模块中,网格容器的所有子元素可以在一个灵活的或者固定的了布局网格中定位到任意槽中。

CSS3 Grid Layout的简介

网格布局特性主要是针对于Web应用程序的开发者。可以用这个模块实现许多不同的布局。网络布局可以将应用程序分割成不同的空间,或者定义他们的大小、位置以及层级。

就像表格一样,网格布局可以让Web设计师根据元素按列或行对齐排列,但他和表格不同,网格布局没有内容结构,从布使各种布局不可能与表格一样。例如,一个网格布局中的子元素都可以定位自己的位置,这样他们可以重叠和类似元素定位。

此外,没有内容结构的网格布局有助于使用流体、调整顺序等技术管理或更改布局。通过结合CSS的媒体查询属性,可以控制网格布局容器和他们的子元素,使用页面的布局根据不同的设备和可用空间调整元素的显示风格与定位,而不需要去改变文档结构的本质内容。

CSS3 Grid Layout背景与前景

做为一个网站从简单的文当档演变为复杂的文档、应用程序,用于文档布局的方法,例如浮动“float”,未必就适合应用程序的布局。通过结合使用表格、javascript或仔细测量浮动元素,设计师发现了变通的方法来实现所需的布局。布局要适应可用空间往往都是很脆弱的,这样给人感觉布局受到了空间的制约。作为一个替代方案,设计师们采用一个固定的布局,这样在屏幕的变化之下利用可用的空间进行布局的调整。

网格布局将可以解决这些问题。它提供了一种机制,设计师可以使用一组可预知标准方案将可用的空间用列或行来布局。设计师可以精确定位和为元素创建精确的尺寸,应用到网格区域。下图展示的就是一个可以用网格实现的基本布局。

CSS3 Grid Layout

调整布局到可用空间

网格布局在网页中可以使用智能回流元素(Intelligently Reflow Elements)。下图表示了一个游戏与五大区域的布局:游戏标题、统计区域、游戏主面板区域、得分区域和控制区域:

CSS3 Grid Layout

作者将游戏区域划分为:

  • 数据统计区域总是会显示在游戏标题下面。
  • 游戏主面板区域出现在数据统计和标题区域的右边。
  • 顶部的游戏标题和游戏主面板应该对齐。
  • 当游戏已经达到最底高度的时候,游戏主面板的底部和数据统计区域底部对齐,否则游戏面板将会扩展到屏幕可用空间。
  • 得分区域应该和游戏数据统计的列对齐,而游戏的控制面板集中放置在游戏主面板的下面。

设计师可以使用网格布局来替代使用脚本来控制元素的绝对定位、宽度和高度的方案,如下图所示:

CSS3 Grid Layout

下面的例子展示了一个设计师如何实现所有的大小、位置和对齐的规则声明。

注:在每个不同的场景中,有多种方法来指定网格的结构和大小以及网格项目的大小。这个例子说明了设计师通过在网格容器(grid container)上定义网格定义行(grid definition rows)网格定义列(grid definition columns)属性各在网格项目(grid item)上定义网格行(grid row)网格列(grid columns)为每一个网格项目(grid item)定义位置和空间。

HTML结构

<div id="grid">
  <div id="title">Game Title</div>
  <div id="score">Score</div>
  <div id="stats">Stats</div>
  <div id="board">Board</div>
  <div id="controls">Controls</div>
</div>   

CSS代码

#grid {
  display: grid;
  background-color: orange;

  /* 分为两列: 
   * 第一列尺寸由内容大小控制
   * 第二列使用剩余空间,但大小从不会小于游戏主机板和控制区域最小宽度
   * 游戏主面板和游戏控制区域占在第二列
   */
  grid-definition-columns: auto minmax(min-content, 1fr);

  /* 三行: 
   * 第一行和最后一行的大小根据内容决定
   * 中间一行可以使用剩余空间,但从来不会小于游戏主面板的最小高度
   */
  grid-definition-rows: auto minmax(min-content, 1fr) auto;
}

/*游戏的每一部分都是通过网格线来定义的,每个部分都在其占的行中,如果哪个部分占有的行数多于一行,需要使用跨行来决定*/
#title{ 
  grid-column: 1; 
  grid-row: 1 ;
  background-color: red;
}
#score{ 
  grid-column: 1; 
  grid-row: 3;
  background-color:green;
}
#stats{ 
  grid-column: 1; 
  grid-row: 2; 
  justify-self: start ;
  background-color:#e9f;
}
#board{ 
  grid-column: 2; 
  grid-row: 1 / span 2; 
  background-color: #ccc;
}
#controls { 
  grid-column: 2; 
  grid-row: 3; 
  align-self: center;
  background-color: yellow;
}   

效果

CSS3 Grid Layout

查看在线案例

特别声明,请使用IE10+浏览器浏览DEMO效果。后面所有示例都只能在IE10+浏览器下才会有效果。

继续前面的例子,设计师希望自己的布局能在传统电脑显示器、手持设备或平板电脑中,都能很好的适应可用空间。同时在手持设置中,应该还要让页面能在设备的竖屏(portrait)和横屏(landscape)都能得到较完全美的显示。如下图所示:

CSS3 Grid Layout

竖屏显示布局效果。

CSS3 Grid Layout

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/css3-grid-layout.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部