css在前端開發中,Grid 布局是網站設計的基礎,CSS Grid 是建立網格布局最強大和最簡單的工具。文我們主要介五分鐘教你學會 CSS Grid 布局的方法,希望能協助到大家。
CSS Grid 今年也獲得了主流瀏覽器(Safari,Chrome,Firefox,Edge)的原生支援,所以我相信所有的前端開發人員都必須在不久的將來學習這項技術。
在本文中,我將儘可能快速地介紹CSS網格的基本知識。我會把你不應該關心的一切都忽略掉了,只是為了讓你瞭解最基礎的知識。
你的第一個 Grid 布局
CSS Grid 布局由兩個核心組成部分是 wrapper (父元素)和 items (子項目)。 wrapper 是實際的 grid(網格),items 是 grid(網格) 內的內容。
下面是一個 wrapper 元素,內部包含6個 items :
<p class="wrapper"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p></p>
要把 wrapper 元素變成一個 grid(網格),只要簡單地把其 display 屬性設定為 grid 即可:
.wrapper { display: grid;}
但是,這還沒有做任何事情,因為我們沒有定義我們希望的 grid(網格) 是怎樣的。它會簡單地將6個 p 堆疊在一起。
我已經添加了一些樣式,但是這與 CSS Grid 沒有任何關係。
Columns(列) 和 rows(行)
為了使其成為二維的網格容器,我們需要定義列和行。讓我們建立3列和2行。我們將使用 grid-template-row 和 grid-template-column 屬性。
.wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px;}
正如你所看到的,我們為 grid-template-columns 寫入了 3 個值,這樣我們就會得到 3 列。 我們想要得到 2 行,因此我們為 grid-template-rows 指定了2個值。
這些值決定了我們希望我們的列有多寬( 100px ),以及我們希望行數是多高( 50px )。 結果如下:
為了確保你能正確理解這些值與網格外觀之間的關係,請看一下這個例子。
.wrapper { display: grid; grid-template-columns: 200px 50px 100px; grid-template-rows: 100px 30px;}
請嘗試理解上面的代碼,思考一下以上代碼會產生怎樣的布局。
這是上面代碼的布局的結果:
非常好理解,使用起來也非常簡單是不是?下面我們來加大一點難度。
放置 items(子項目)
接下來你需要學習的是如何在 grid(網格) 上放置 items(子項目) 。特別注意,這裡才是體現 Grid 布局超能力的地方,因為它使得建立布局變得非常簡單。
我們使用與之前相同的 HTML 標籤,為了協助我們更好的理解,我們在每個 items(子項目) 加上了單獨的 class :
<p class="wrapper"> <p class="item1">1</p> <p class="item2">2</p> <p class="item3">3</p> <p class="item4">4</p> <p class="item5">5</p> <p class="item6">6</p></p>
現在,我們來建立一個 3×3 的 grid(網格):
.wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px;}
將得到以下布局:
不知道你發現沒有,我們只在頁面上看到 3×2 的 grid(網格),而我們定義的是 3×3 的 grid(網格)。這是因為我們只有 6 個 items(子項目) 來填滿這個網格。如果我們再加3個 items(子項目),那麼最後一行也會被填滿。
要定位和調整 items(子項目) 大小,我們將使用 grid-column 和 grid-row 屬性來設定:
.item1 { grid-column-start: 1; grid-column-end: 4;}
我們在這裡要做的是,我們希望 item1 佔據從第一條網格線開始,到第四條網格線結束。換句話說,它將獨立佔據整行。 以下是在螢幕上顯示的內容:
如果你不明白我們設定的只有 3 列,為什麼有4條網格線呢?看看下面這個映像,我畫了黑色的列網格線:
請注意,我們現在正在使用網格中的所有行。當我們把第一個 items(子項目) 佔據整個第一行時,它把剩下的 items(子項目) 都推到了下一行。
最後,給你一個更簡單的縮寫方法來編寫上面的文法:
.item1 { grid-column: 1 / 4;}
為了確保你已經正確理解了這個概念,我們重新排列其他的 items(子項目) 。
.item1 { grid-column-start: 1; grid-column-end: 3;}.item3 { grid-row-start: 2; grid-row-end: 4;}.item4 { grid-column-start: 2; grid-column-end: 4;}
你可以嘗試在你的腦子裡過一邊上面代碼的布局效果,應該不會很難。
以下是頁面上的布局效果:
以上內容就是五分鐘教你學會 CSS Grid 布局,希望能協助到大家。