下面代碼是該小節全部案例的 DOM 結構css
<div className="container">
{Array.from({ length: 9 }).map((v, index) => (
<div className="project" key={index}>
{index + 1}
</div>
))}
</div>
複製代碼
Grid 佈局是經過 display: grid
在容器內創建網格格式化上下文, 容器內部子元素
, 稱爲"項目", 須要注意的是項目只能是容器的頂層子元素
, 不包含項目的子元素,html
下面代碼: class = 'container'
就是容器, class = 'project'
就是項目dom
<style> .container { display: grid; } </style>
<div class="container">
<div class="project"></div>
<div class="project"></div>
<div class="project"></div>
</div>
複製代碼
Grid 佈局是經過 display: grid
將容器劃分爲多個網格, 既然是網格那麼天然就有了行和列的概念, 如圖:佈局
行和列的交叉區域, 稱爲 單元格
(cell) 。正常狀況下, n 行和 m 列會產生 n x m 個單元格, 如圖:flex
劃分網格的線, 被稱爲 網格線
(grid line) 。水平網格線劃分出行, 垂直網格線劃分出列。正常狀況下, n 行有 n + 1 根水平網格線, m 列有 m + 1 根垂直網格線, 如圖是一個 5 * 4 的單元格公產生 6 根垂直網格線 5 根水平網格線flexbox
以網格線爲界可被劃分爲一塊塊區域, 可以使用 grid-template-areas
定義每一個單元格區域名稱spa
display: grid
指定一個容器採用網格佈局, 默認容器爲塊級元素display: inline-grid
指定一個容器採用網格佈局, 特別要注意的是容器將被設爲行內元素float
、display: inline-block
、display: table-cell
、vertical-align
和 column-*
等屬性將失效。.container {
display: grid;
}
複製代碼
這兩個屬性用於定於容器網格大小數量, grid-template-columns
屬性定義每一列的列寬、數量, grid-template-rows
屬性則定義每一行的行高、數量。3d
下面代碼指定了一個三行三列的網格, 列寬和行高都是 100px
, 每一個子項默認從左向右進行排列而且佔滿一個網格。code
.container {
width: 300px;
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
複製代碼
下面代碼指定了一個三行三列的網格, 列寬和行高都是 33.33%
, 每一個子項默認從左向右進行排列而且佔滿一個網格。cdn
.container {
width: 300px;
height: 200px;
display: grid;
grid-template-rows: 33.33% 33.33% 33.33%;
grid-template-columns: 33.33% 33.33% 33.33%;
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
複製代碼
下面代碼指定了一個三行三列的網格, 第三列寬度爲 100px, 第一列和第二列佔滿全部剩餘空間, 而且第二列寬度是第一列的兩倍。
.container {
width: 300px;
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 1fr 2fr 100px;
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
複製代碼
50px
, 第二列自適應(佔滿全部剩餘空間).container {
width: 300px;
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 50px auto 50px;
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
複製代碼
50px
, 第二列和第三列自適應(等比例分配剩餘空間).container {
width: 300px;
display: grid;
grid-template-rows: 100px 100px 100px;
// 等價於: grid-template-columns: 50px 1fr 1fr;
grid-template-columns: 50px auto auto;
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
複製代碼
下面代碼指定了一個三行三列的網格, 第一列和第三列設置最小寬度 100px
最大寬度 1fr
, 在容器寬度足夠大的狀況下列寬等比例縮放, 在容器寬度不足狀況下第一列和第三列將固定寬度 100px 第二列寬度自適應
.container {
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: minmax(100px, 1fr) 1fr minmax(100px, 1fr);
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
複製代碼
grid-template-columns: repeat(3, 100px)
等價於 grid-template-columns: 100px 100px 100px
.container {
width: 300px;
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
複製代碼
auto-fill
關鍵字, 該關鍵字表示自動填充全部剩餘空間, 下面代碼中 repeat(auto-fill, 100px)
將自動建立列(列寬 50px)並佔滿全部剩餘空間.container {
width: 300px;
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: 200px repeat(auto-fill, 50px);
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
複製代碼
在 grid-template-columns
屬性和grid-template-rows
屬性裏面可經過 [網格線名稱 <網格線名稱>]
爲網格線定義一個或多個名稱, 爲網格線定義名稱方便容器內項目進行佈局
下面是幾種常見的情景
grid-template-rows: [c1 a1] 100px [c2 a2] 100px [c3] 100px [c4];
repeat(3, [col-start] 250px [col-end]);
複製代碼
可取值有長度單位、百分比
下面代碼指定了一個三行三列的網格並設置了行間距 10px
.container {
width: 300px;
height: 300px;
display: grid;
row-gap: 10px;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
複製代碼
可取值有長度單位、百分比
下面代碼指定了一個三行三列的網格並設置了列間距 10px
.container {
width: 300px;
height: 300px;
display: grid;
column-gap: 10px;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
複製代碼
gap: <row-gap> <column-gap>
下面代碼指定了一個三行三列的網格並設置了行間距 10px
、列間距 20px
.container {
width: 300px;
height: 300px;
display: grid;
gap: 10px 20px;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
複製代碼
grid-auto-flow 屬性決定容器內子元素排列順序
該值爲默認值, 即 先行後列
, 子元素將先填滿第一行, 再開始放入第二行
.container {
display: grid;
grid-auto-flow: row;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
複製代碼
按列進行排序, 子元素將先填滿第一列, 再開始放入第二列
.container {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
複製代碼
按行進行排序, 即 先行後列
而且儘量緊密填滿, 儘可能不出現空單元格
grid-auto-flow: row
當第一第二個子元素佔用兩個單元格將產生下面這樣的佈局.container {
width: 300px;
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
// 爲元素設置屬性: 後續將會詳細說明
.project {
&:nth-child(1),
&:nth-child(2) {
grid-column-end: 3;
grid-column-start: 1;
}
}
複製代碼
row dense
進行排序, 讓佈局儘量的緊密、填滿全部單元格.container {
width: 300px;
display: grid;
grid-auto-flow: row dense;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
// 爲元素設置屬性: 後續將會詳細說明
.project {
&:nth-child(1),
&:nth-child(2) {
grid-column-end: 3;
grid-column-start: 1;
}
}
複製代碼
按列進行排序, 而且儘量緊密填滿, 儘可能不出現空單元格
column
當第一第二個子元素佔用兩個單元格將產生下面這樣的佈局.container {
width: 300px;
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
// 爲元素設置屬性: 後續將會詳細說明
.project {
&:nth-child(1),
&:nth-child(2) {
grid-row-end: 3;
grid-row-start: 1;
}
}
複製代碼
column dense
進行排序, 讓佈局儘量的緊密、填滿全部單元格.container {
width: 300px;
display: grid;
grid-auto-flow: column dense;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
// 爲元素設置屬性: 後續將會詳細說明
.project {
&:nth-child(1),
&:nth-child(2) {
grid-row-end: 3;
grid-row-start: 1;
}
}
複製代碼
設置網格系統在容器內水平方向上的佈局, 可取值有:
start(默認值): 水平方向上向左進行靠攏
end: 水平方向上向右進行靠攏
center: 居中對齊
stretch: 自適應拉伸
space-around: 單元格周圍具備相同空白
space-between: 單元格向兩端靠齊而且單元格中間具備等比例的空白, 單元格和邊界不存在空白
space-evenly: 單元格向兩端靠齊而且單元格中間具備等比例的空白, 單元格和邊界一樣具備空白
下面代碼實現單元格的水平居中對齊
.container {
width: 300px;
height: 300px;
display: inline-grid;
justify-content: center;
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(3, 50px);
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
複製代碼
設置網格系統在容器內垂直方向上的佈局, 可取值有:
start(默認值): 垂直方向上向上進行靠攏
end: 垂直方向上向下進行靠攏
center: 居中對齊
stretch: 自適應拉伸
space-around: 單元格周圍具備相同空白
space-between: 單元格向兩端靠齊而且單元格中間具備等比例的空白, 單元格和邊界不存在空白
space-evenly: 單元格向兩端靠齊而且單元格中間具備等比例的空白, 單元格和邊界一樣具備空白
下面代碼實現單元格的垂直居中對齊
.container {
width: 300px;
height: 300px;
display: inline-grid;
align-content: center;
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(3, 50px);
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
複製代碼
place-content: <align-content> <justify-content>
下面代碼實現單元格水平垂直居中佈局
.container {
width: 300px;
height: 300px;
display: inline-grid;
place-content: center;
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(3, 50px);
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
複製代碼
設置單元格內項目在水平方向上的佈局
下面代碼實現單元格內項目水平居中佈局
.container {
width: 300px;
display: grid;
justify-items: center;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
width: 50px;
height: 50px;
background: rgb(random(255), random(255), random(255));
}
}
複製代碼
設置單元格內項目在垂直方向上的佈局
下面代碼實現單元格內項目垂直居中佈局
.container {
width: 300px;
display: grid;
align-items: center;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
width: 50px;
height: 50px;
background: rgb(random(255), random(255), random(255));
}
}
複製代碼
place-items: <align-items> <justify-items>
下面代碼實現單元格內項目水平垂直居中佈局
.container {
width: 300px;
display: grid;
place-items: center;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
width: 50px;
height: 50px;
background: rgb(random(255), random(255), random(255));
}
}
複製代碼
grid-template-columns
屬性和 grid-template-rows
屬性用用於定義容器網格行和列的數目和寬度grid-auto-columns
grid-auto-rows
則用於定義系統自動建立網格時網格的列寬和行寬grid-auto-columns
grid-auto-rows
屬性值和 grid-template-columns
相似下面代碼指定了一個二行三列的網格, 多餘的項目將自動建立單元格並設置行寬爲 50x
.container {
width: 300px;
display: grid;
grid-template-rows: repeat(2, 100px);
grid-template-columns: repeat(3, 100px);
background: rgba($color: #000, $alpha: 0.04);
grid-auto-rows: 50px;
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
複製代碼
grid-template-areas
爲網格中單元格劃分區域,一個區域可包含一個或多個單元格.
表示下面代碼定義了區域 a
和區域 b
, 每一個區域都包含兩個單元格, 其他單元格不被利用
.container {
width: 300px;
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
background: rgba($color: #000, $alpha: 0.04);
grid-template-areas:
'a a .'
'b b .'
'. . .';
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
複製代碼
grid-template
屬性是 grid-template-columns
grid-template-rows
和 grid-template-areas
這三個屬性的合併簡寫形式
grid
屬性是 grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow
這六個屬性的合併簡寫形式。
四個屬性用於定義項目的位置, 屬性值能夠是網格線索引、網格線名稱、關鍵詞 span
下面代碼, 使用網格線索引爲第一個項目設置左右邊框位置, 使用網格線名稱設置第一個項目上下邊框位置
.container {
width: 300px;
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: [a1] 100px [a2] 100px [a3] 100px [a4];
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
.project:nth-child(1) {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: a1;
grid-row-end: a3;
}
複製代碼
下面代碼使用 span
關鍵字爲第一個項目設置邊框位置, span
關鍵字定義項目跨度
.container {
width: 300px;
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: [a1] 100px [a2] 100px [a3] 100px [a4];
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
.project:nth-child(1) {
grid-column-start: span 2;
grid-row-start: span 2;
}
複製代碼
grid-column
屬性是 grid-column-start
和 grid-column-end
簡寫形式, 兩個屬性值間用 /
分隔grid-row
屬性是 grid-row-start
屬性和 grid-row-end
簡寫形式, 兩個屬性值間用 /
分隔.container {
width: 300px;
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: [a1] 100px [a2] 100px [a3] 100px [a4];
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
.project:nth-child(1) {
grid-row: 1 / 3; // 等價於 grid-row: 1 / span 2;
grid-column: 1 / 3; // 等價於 grid-column: 1 / span 2;
}
複製代碼
grid-area 指定項目所處的區域
.container {
width: 300px;
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
background: rgba($color: #000, $alpha: 0.04);
grid-template-areas:
'a a .'
'a a .'
'. . .';
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
background: rgb(random(255), random(255), random(255));
}
}
.project:nth-child(1) {
grid-area: a;
}
複製代碼
定義當前項目在單元格內水平方向上的佈局
下面代碼實現項目在其單元格內水平居中
.container {
width: 300px;
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
width: 50px;
height: 50px;
background: rgb(random(255), random(255), random(255));
}
}
.project:nth-child(1) {
justify-self: center;
}
複製代碼
定義當前項目在單元格內垂直方向上的佈局
下面代碼實現項目在其單元格內垂直居中
.container {
width: 300px;
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
width: 50px;
height: 50px;
background: rgb(random(255), random(255), random(255));
}
}
.project:nth-child(1) {
align-self: center;
}
複製代碼
place-self
屬性是 align-self
屬性和 justify-self
屬性的簡寫, 語法: place-self: <align-self> <justify-self>
。 注意: 若是省略第二個值, place-self
屬性則表示水平垂直具備相同佈局
下面代碼實現項目在其單元格內水平、垂直居中
.container {
width: 300px;
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
background: rgba($color: #000, $alpha: 0.04);
}
@for $index from 1 to 10 {
.project:nth-child(#{$index}) {
width: 50px;
height: 50px;
background: rgb(random(255), random(255), random(255));
}
}
.project:nth-child(1) {
place-self: center;
}
複製代碼