在 上一節中 ,主要介紹了CSS Grid布局中網格線、網格布局屬性、單元格合並等相關術語,在這篇文章中將繼續介紹網絡布局中的相關術語:網格區域,網格軌道和網格單元格。希望對大家對學習CSS Grid布局有所幫助。
網格區域(Grid areas)
記得前面的文章中介紹網絡線的一節中,了解到可以通過
grid-row
和
grid-column
構建出
grid-area
(也就是我們要說的網格區域)。通過網格線構建的網格區域,其有一個明確的順序:
grid-row-start / grid-column-start / grid-row-end / grid-column-end
。如下面示例所示:
.item-1 {
grid-area: 1 / 1 / 2 / 4;
}
.item-2 {
grid-area: 2 / 1 / 4 / 2;
}
.item-4 {
grid-area: 2 / 3 / 4 / 4;
}
.item-6 {
grid-area: 4 / 1 / 5 / 4;
}
效果如下:
上面這種方式,能通過網格線構造出想要的網格區域。但更妙的是,在CSS Grid布局中可以直接定義網格區域,用來放置對應的網格項目。CSS Grid布局有可以使用
grid-template-areas
屬性
來聲明。然後使用
grid-area
調用聲明好的網格區域名稱來放置對應的網格項目。
假設我們有一個
5 x 4
的網格:
<section class="grid">
<div class="title">title</div>
<div class="nav">nav</div>
<div class="main">main</div>
<div class="aside">aside</div>
<div class="footer">footer</div>
</section>
先在把
.grid
聲明為網格容器:
.grid {
grid-template-columns: 100px 100px 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px;
grid-template-areas:
'title title title title aside'
'nav main main main aside'
'nav main main main aside'
'footer footer footer footer footer';
}
通過
grid-template-rows
設置了每行的行高,
grid-template-columns
設置了每列的列寬,而使用
grid-template-areas
是用來聲明了網格區域。
把對應的網格項目放到已聲明好的網格區域上:
.title {
grid-area: title;
}
.nav {
grid-area: nav;
}
.main {
grid-area: main;
}
.aside {
grid-area: aside;
}
.footer {
grid-area: footer;
}
對應的意思草圖如下所示:
最終上面代碼繪制出來的網格效果如下:
網格區域和網格線命名
有關於網格區域和位置屬性是一個非常有趣的事情,可以使用網格線的隱名來創建一個網格區域。這些隱名使用
-start
和
-end
後綴添加到網格區域名後面。比如上面示例中的
title
區域創建了
4
條網格線的隱名:
-
區域左邊的網格線
title-start
-
區域右邊的網格線
title-end
-
區域頂邊的網格線
title-start
-
區域底邊的網格線
title-end
像下面的例子,可以使用隱式名來放置一個網格項目:
grid-column: main-start / aside-end;
grid-row: title-start / nav-end;
在網格布局中,如果你使用了帶有後綴的名詞命名了網格線,其實就創建了一個隱式的網格區域,所以像下面這樣的方式,也可以創建和前面示例相同的網格:
.grid {
display: grid;
grid-template-columns: [title-start nav-start footer-start] 100px [main-start nav-end] 100px 100px 100px [aside-start title-end main-end] 100px [aside-end footer-end];
grid-template-rows: [title-start aside-start] 100px [nav-start main-start title-end] 100px 100px [footer-start nav-end main-end aside-end] 100px [footer-end];
}
這樣創建好網格線之後,可以直接通過
grid-area
調用隱式的網格區域名來創建網格:
除此之外,還可以通過
grid-row
和
grid-column
調用網格線名稱,創建網格:
.title {
grid-row: title-start / title-end;
grid-column: title-start / title-end;
}
.nav {
grid-row: nav-start / nav-end;
grid-column: nav-start / nav-end;
}
.main {
grid-row: main-start / main-end;
grid-column: main-start / main-end;
}
.aside {
grid-row: aside-start / aside-end;
grid-column: aside-start / aside-end;
}
.footer {
grid-row: footer-start / footer-end;
grid-column: footer-start / footer-end;
}
效果如下:
或許你可能會覺得,在
grid-template-rows
和
grid-template-columns
中使用一大串的
[title-start aside-start]
等方式聲明隱式網格線,創建隱式的網格區域麻煩。但事實上,我們不需要這樣做,通過
grid-template-areas
聲明的網格區域,就已經創建了隱式網格線,如此一來,不使用
grid-area
而使用
grid-row
和
grid-column
就可以放置對應的網格項目。
.grid {
display: grid;
grid-template-columns: 100px 100px 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px;
grid-template-areas:
'title title title title aside'
'nav main main main aside'
'nav main main main aside'
'footer footer footer footer footer';
}
.title {
grid-row: title-start / title-end;
grid-column: title-start / title-end;
}
.nav {
grid-row: nav-start / nav-end;
grid-column: nav-start / nav-end;
}
.main {
grid-row: main-start / main-end;
grid-column: main-start / main-end;
}
.aside {
grid-row: aside-start / aside-end;
grid-column: aside-start / aside-end;
}
.footer {
grid-row: footer-start / footer-end;
grid-column: footer-start / footer-end;
}
網格軌道(Grid Tracks)
網格軌道 用更好的詞來描述其實就是網格的 行 或 列 。就是網格中相鄰兩條 網格線 組成的區域。如下圖所示:
如上圖所示,豎線網格線
1
和
2
(藍綠色)組成了第一列;豎線網格線
5
和
6
(黃色)組成了第五列;橫線網格線
1
和
2
(酒紅色)組成了第一行。那麽這幾個區域都是我們所說的網格軌道。
網格中的每個軌道(行或列)都有一個尺寸函數,用來控制行的高度或列的寬度。而且還具備自動計算的功能,當內容超過網格行、列指定的尺寸時,會自動增加行的高度或列的寬度。另外相鄰網格軌道可以通過 網格間距 隔開。
單元格(Grid Cell)
網格單元格(Grid Cell)是指網格行和列交叉點。它是一個可以定位網格項目時要參考的網格的最小單位。
在網格布局中,多個單元格可以構成一個網格區域。其實他就像表格(
table
)中的
td
。
總結
繼上一篇文章 之後,在這篇文章中介紹了網格區域、網格軌道和網格單元格的術語。除了這兩篇文章介紹到的中網格線、網格布局屬性、單元格合並、網格區域、網格軌道和網格單元格之外還有其他術語,在下一篇文章中將詳細介紹網格布局中的網格術語。也是較為復雜的一部分。感興趣的同學歡迎持續關註後續的更新。
大漠
常用昵稱“大漠”,W3CPlus創始人,目前就職於手淘。對HTML5、CSS3和Sass等前端腳本語言有非常深入的認識和豐富的實踐經驗,尤其專註對CSS3的研究,是國內最早研究和使用CSS3技術的一批人。CSS3、Sass和Drupal中國布道者。2014年出版《 圖解CSS3:核心技術與案例實戰 》。如需轉載,煩請註明出處: http://www.w3cplus.com/css3/css-grid-layout-terminology-part2.html
CSS3 Grid Layout CSS3 Grid Layout CSS3Tags: title 文章 網絡 項目
文章來源: