資訊專欄INFORMATION COLUMN
摘要：我們將使用檢查器來檢查列關鍵不同在于這種方式先定義了列即布局。這種方式迫使我們將分割成多少列。而使用則不會面臨這種限制。我相信將會是時代，它會有一個突破，并成為前端開發者的必備技能。
簡評：近些年 CSS Flexbox
在前端開發者中變得非常流行。其實并不奇怪，它能讓我們更容易創建出動態布局，以及在容器中對其內容。然而城里新來了個小伙叫 CSS
Grid，它有許多彈性盒的能力，有時候比彈性盒好用，有時候卻不好用。作者點評了彈性盒、網格兩者之間的差異，以及什么時候用哪種比較好。
先來看下這節課的截屏預告：
一維 VS 二維
如果你想從這篇文章中學到精髓，下面的就是：
Flexbox 是為一維布局設計的，而 Grid 是為二維布局設計。
這意味著如果你想要在一個方向上放置項目（比如在標題欄中有三個按鈕），那么你應該用Flexbox：
它會比 CSS Grid 更加靈活，同時只需要更少的代碼，更容易維護。
然而，當你需要在兩個維度 —— 行和列上創建整個布局時，那么你應該使用 CSS Grid：
這種情況下， CSS Grid 會更加靈活，讓你的標記更加簡單。代碼也更容易維護。
當然你可以結合兩者使用。上面的例子中將會完美地使用 Grid 做頁面布局，用 Flexbox 來對齊標題欄中的內容。在文末，我會確切地展示如何做到這點。
內容優先 VS 布局優先
另一個核心區別在于：Flexbox 以內容為基礎，而 Grid 以布局為基礎。這看起來有點抽象，所以讓我們來看看確切地例子，這會更容易理解。
我們會使用之前的 header， HTML 代碼如下：
在我們進入 Flexbox 布局之前，這些 div 是相互疊在一起的：
Flexbox header
然而，當我們給一個 display: flex 樣式時，這些元素就會排成一行。
header {
display: flex;
}
為了將登出按鈕移動到最右邊，我們只需要找到那個元素，然后給一個外邊距：
header > div:nth-child(3) {
margin-left: auto;
}
結果如下：
這里我希望你們注意一下：我們讓這些元素自己決定它們該如何放置。除了最初的 display: flex; 我們不需要預定義任何東西。
這是 Flexbox 和 Grid 的核心差異，當我們用 Grid 重新創建 header 時，這點會更明顯。
即便 CSS Grid 不是用來創建一維的 header，它在這篇文章中仍然是一個很好的練習，讓我們明白 Flexbox 和 Grid的核心差異。
Grid header
使用 CSS Grid，我們可以有好幾種方式來創建 header。我將使用相當直接的一種，我們的網格有 10 列，每列寬度為 1 個單元：
header {
display: grid;
grid-template-columns: repeat(10, 1fr);
}
和 Flexbox 的方案看起來完全一樣。
但是，我們可以看看底下有哪些不同。我們將使用 Chrome 檢查器來檢查列：
關鍵不同在于這種方式先定義了列 —— 即布局。我們先定義了列的寬度，然后把內容放到可用的網格里。
這種方式迫使我們將 header 分割成多少列。
除非我們改變網格，我們被 10 列網格限制了。而使用 Flexbox 則不會面臨這種限制。
為了將登出按鈕放到最右邊，我們需要把它放在第 10 列：
header > div:nth-child(3) {
grid-column: 10;
}
檢查網格時看起來是這樣：
我們不能簡單地給一個 margin-left: auto; 因為登出按鈕已經被放在布局中的確切的格子中，在第三列。為了移動它，我們要找到另一個格子。
結合兩者
現在看下如何將兩者結合起來，將我們的 header 合并到我們的網站布局。我們從構建網站布局開始：
HTML 標記：
HEADER CONTENT
CSS ：
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px 350px 50px;
}
項目樣式：
header {
grid-column: span 12;
}
aside {
grid-column: span 2;
}
main {
grid-column: span 10;
}
footer {
grid-column: span 12;
}
現在添加 header。我們把 header —— CSS Grid 中的一個項目轉換為 Flexbox 容器。
header {
display: flex;
}
現在可以把登出按鈕設置到右邊了：
header > div:nth-child(3) {
margin-left: auto;
}
現在兩個容器看起來是這樣的：
現在你應該深刻地理解了 Flexbox 和 Grid 的不同之處，并且知道如何使用它們了。
瀏覽器支持
最后，我想提一下瀏覽器支持。在寫這篇文章時，全球網站流量的 77% 支持 CSS Grid，并且還在增加。我相信 2018 將會是 CSS Grid 時代，它會有一個突破，并成為前端開發者的必備技能。就像前幾年的 CSS Flexbox 那樣。源代碼鏈接
原文鏈接：The ultimate CSS battle: Grid vs Flexbox
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112947.html
摘要：網格單元格網格單元格是指四條網格線之間的空間。所以它是最小的單位，就像表格中的單元格。圖中突出顯示的網格區域是行線和列線之間的區域，其主要包括了四個網格單元格。 CSS Grid現在已經被W3C納入到CSS3的一個布局模塊當中，被稱為CSS Grid Layout Module。而我們較為熟悉的還是將其想像成網格或者柵格，也就是早期的960gs。不管是網格還是柵格或者現在的CSS Gr...
摘要：你可以用網格這樣做這樣的顯示效果是沒什么錯誤的，當使用網格，重新定義列數非常簡單。絕對定位當我們絕對定位一個網格元素的時候，這個元素會跑到它的容器中，我們可以用和來定位它。最簡單的命名約定使用網格自動編號。 注：此文是我翻譯的第一篇技術文章。適合有一定CSS原生網格布局使用經驗的開發者（讀前需要先去了解一下原生CSS網格的語法），原生CSS網格布局（Native CSS grid）截止...
摘要：你可以用網格這樣做這樣的顯示效果是沒什么錯誤的，當使用網格，重新定義列數非常簡單。絕對定位當我們絕對定位一個網格元素的時候，這個元素會跑到它的容器中，我們可以用和來定位它。最簡單的命名約定使用網格自動編號。 注：此文是我翻譯的第一篇技術文章。適合有一定CSS原生網格布局使用經驗的開發者（讀前需要先去了解一下原生CSS網格的語法），原生CSS網格布局（Native CSS grid）截止...
閱讀 1379·2023-04-25 18:34
閱讀 3437·2021-11-19 09:40
閱讀 2824·2021-11-17 09:33
閱讀 2935·2021-11-12 10:36
閱讀 2823·2021-09-26 09:55
閱讀 2653·2021-08-05 10:03
閱讀 2512·2019-08-30 15:54
閱讀 2861·2019-08-30 15:54
