Day07 - 網格排版


打從CSS問世以來,它的核心一直存在著排版的缺陷。為了排版,我們使用各式各樣的特殊技巧來填補這個空缺。Flexbox排版協助填這個空缺,但flexbox只是針對導覽列等特殊情況設計的功能。

相反的,網格排版(Grid layout)是通用排版系統,有許多強大又有彈性的方式來定義有重複模式的網格線(grid line),將元素附加到這些網格線上等,也可以做巢狀網格,甚至還可以將表格或flexbox容器加到網格裡等各式各樣的作法。網格排版是重要的排版系統,有許多需要學習的內容!

建立網格容器

建立網格的第一步是定義網格容器(grid container)。類似容器區塊或是flexbox排版中的彈性容器。網格容器是為了內容定義了網格格式化環境(grid formatting context)的元素。

網格可以區分兩種:

  1. (disply:grid)為普通的網格,會產生區塊級網格。
  2. (display:inline-grid)通常用在文字元素之間的行內網格。
    大多數情況下,我們建立的網格都是區塊級元素

基本網格術語

網格容器是建立網格格式化環境的方框,也就是用來建立網格與依照網格排版規則放置元素的區域。

網格項目(grid item)

網格項目是在網格排版環境中參與網格排版的東西,通常是網格容器的子元素,但也可以是元素內容裡的一些文字。

網格軌道(grid track)

相鄰於網格線兩側所形成的連續單位,也就是指相鄰的網格行(grid column)或網格列(grid row),會從網格容器的一側延續到另一側。

網格單元格(grid cell)

由四條網格線所形成的封閉區域,當中沒有其他的網格線穿過。這是網格排版最小的區域單位。

網格區域(grid area)

由四調網格線形成的任何封閉矩型區域,由一個以上的網格單位格組成。區域最小可以是一個單元格,最大可以包含網格中的所有的單元格。

放置網格線

  • grid-template-rows
  • grid-template-columns

本篇未完待續

#grid







你可能感興趣的文章

一般業界數位IC設計開發流程

一般業界數位IC設計開發流程

[ JavaScript 07 ] function return

[ JavaScript 07 ] function return

ASP.NET Core Web API 入門教學 - 自訂模型資料驗證標籤

ASP.NET Core Web API 入門教學 - 自訂模型資料驗證標籤






留言討論