【CSS】使用css grid快速排版 CSS Grid

04-15

基本的CSS Grid

例子中使用的html；給需要創造grid的div賦予class name 「container」

<html> <head> <link rel="stylesheet" href="basic.css"> <style> </style> </head> <body> <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </body></html>

通過定義container的style來創造基本的CSS Grid

.container { display: grid;//兩列三行的一個grid；第一列200px寬，第二列佔用剩下的所有空間；每一行都高100px； grid-template-columns: 200px auto; grid-template-rows: 100px 100px 100px;// 各自之間的gap是3px寬； grid-gap: 3px;}

除了手動強行添加每列的寬度之外，還可以使用fr直接定義column佔用整個屏幕寬度的幾分之幾。

.container { display: grid;//兩列三行的一個grid；第一和第二列平分整個屏幕的寬度；每一行都高100px； grid-template-columns: 1fr 1fr; grid-template-rows: 100px 100px 100px; grid-gap: 3px;}

這樣一個簡單的css grid就創造好啦～

Repeat 的使用方法

知道了如何創造簡單的css grid之後，我們可以通過使用repeat簡化syntax的書寫；下面兩個例子使用了更簡單的書寫方法創造了跟上面一模一樣的grid。

.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); grid-gap: 3px;}

簡單寫的形式（行 / 列）

.container { display: grid; grid-template: repeat(3, 100px) / repeat(3, 1fr); grid-gap: 3px;}

確定div在grid中的位置

這裡是下面的例子中使用的html，給了每個div不同的class name，從而來分別定義他們的位置;

<html> <head> <link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="basic.css"> </head> <body> <div class="container"> <div class="header">HEADER</div> <div class="menu">MENU</div> <div class="content">CONTENT</div> <div class="footer">FOOTER</div> </div> </body></html>

在定義內容位置的時候，我們使用了column line；比如在下面的例子里，我們告訴header和footer：你們要從第一條column line開始，到第三條column line結束～

一次類推，如果我們有3個column，就會有4條column line，等等。

.container { display: grid; grid-gap: 3px; grid-template-columns: repeat(2, 1fr); grid-template-rows: 40px 200px 40px;}.header { grid-column-start: 1; grid-column-end: 3;}.footer { grid-column-start: 1; grid-column-end: 3;}

equal to

.container { display: grid; grid-gap: 3px; grid-template-columns: repeat(2, 1fr); grid-template-rows: 40px 200px 40px;}.header { grid-column: 1 / 3;}.footer { grid-column: 1 / 3;}

如果你不知道將來會有多少個column，無法確定column line的數量～而你仍然想要某個column佔用剩餘屏幕的所有寬度，就可以用下面的方法： grid-column: 1 / -1;

.header { grid-column: 1 / -1;}.footer { grid-column: 1 / -1;}

進一步，我們可以把每一個div的位置都確定下來～

.container { display: grid; grid-gap: 3px; grid-template-columns: repeat(12, 1fr); grid-template-rows: 40px 200px 40px;}.header { grid-column: 2 / -1;}.menu { grid-row: 1 / 3;}.content { grid-column: 2 / -1;}.footer { grid-column: 1 / -1;}

Template Areas

下面的例子解釋了如何通過命名每一個grid裡面的cell，來簡單快速地定義每個內容塊應該處於的位置～

通過下面的方法，我們創造了和上面例子一模一樣的一個grid

.container { height: 100%; display: grid; grid-gap: 3px; grid-template-columns: repeat(12, 1fr); grid-template-rows: 40px auto 40px; //naming the cells; must be 12 to match the number of the columns. grid-template-areas: "m h h h h h h h h h h h" "m c c c c c c c c c c c" "f f f f f f f f f f f f";}.header { grid-area: h;}.menu { grid-area: m;}.content { grid-area: c;}.footer { grid-area: f;}

需要注意的地方是，

這些區域areas必須是矩形～否則就不work啦
在命名cell的時候 "m h h h h h h h h h h h"裡面的數量必須和 grid-template-columns: repeat(12, 1fr)里的「12」相對應
給一個cell命名為「.「可以讓那個cell的位置留空

響應式網頁 Responsive Design

auto-fit 和 minmax

通過下面的例子，我們可以創造一個grid，在這個grid裡面：每一個cell的最小寬度是100px; 最大是按照fr的規則佔用幾分之幾的屏幕～

這樣每行顯示的列數就會根據瀏覽器窗口的大小自動進行變化啦～

.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: repeat(2, 100px);}

Implicit Rows

在一條auto-fit和minmax的基礎上，你會發現還是有問題，從第三列開始，每一列的寬度不是我們定義的100px了。因為在讓列變得responsive的同時，我們創造了新的行（implicit rows），而我們只定義了兩行的高度：grid-template-rows: repeat(2, 100px);

這個時候，我們就需要使用：grid-auto-rows: 100px; 來使每一行都有同樣的高度。

.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));// this line to help with auto-created rows. grid-auto-rows: 100px;}

創造一個圖片Gallery

Image Grid

.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-auto-rows: 75px;// this following line help with fix the blanks to make the grid flexible. grid-auto-flow: dense;}.horizontal { grid-column: span 2;}.vertical { grid-row: span 2;}.big { grid-column: span 2; grid-row: span 2;}

給column lines起名字

通過在 grid-template-columns: [main-start] 1fr [content-start] 5fr [content-end main-end] 之中的對應位置使用「【】」來給column line命名：

.container { height: 100%; display: grid; grid-gap: 3px; grid-template-columns: [main-start] 1fr [content-start] 5fr [content-end main-end]; grid-template-rows: [main-start] 40px [content-start] auto [content-end] 40px [main-end]; }.header { grid-column: main-start / main-end;}.menu {}.content { grid-column: content-start / content-end;}.footer { grid-column: main-start / main-end;}

通過命名來更簡單地確定每部分內容應在的位置：

.container { height: 100%; display: grid; grid-gap: 3px; grid-template-columns: [main-start] 1fr [content-start] 5fr [content-end main-end]; grid-template-rows: [main-start] 40px [content-start] auto [content-end] 40px [main-end]; }.header { grid-column: main;}.menu {}.content { grid-column: content;}.footer { grid-column: main;}

通過命名來更簡單地使用grid-area(前面有提到)確定每部分內容應在的位置:

.content { grid-area: content;}

調整具體內容在cell裡面的位置；調整整個columns和rows在grid裡面的位置：

Justify content and align content

.container { border: 1px solid black; height: 100%; display: grid; grid-gap: 5px; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 100px);// start; end; space-evenly; space-between; space-around; justify-content: center; align-content: center;}

Justify items and align items

.container { height: 100%; display: grid; grid-gap: 3px; grid-template-columns: repeat(12, 1fr); grid-template-rows: 40px auto 40px; // start; end; center; stretch justify-items: stretch; // start; end; center; stretch align-items: stretch;}.header { grid-column: 1 / -1;}.menu { grid-column: 1 / 3;}.content { grid-column: 3 / -1;//the section itself can also be justified and aligned justify-self: center; align-self: end;}.footer { grid-column: 1 / -1;}

在創造responsive grid的時候使用Auto-fit 和Auto-filll之間的區別

auto-fit

//auto-fit; collapse the auto-created columns;.container { border: 1px solid black; display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: 100px 100px;}

Auto-fill

//auto-fill; dont collapse the auto-created columns;.container2 { border: 1px solid black; display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-template-rows: 100px 100px;}

Reference:
https://scrimba.com/
Cover image:
Photo by Greg Rakozy on Unsplash