採用20/80原則學習 CSS Grid 佈局

時間 2019-11-08

標籤採用原則學習 css grid 佈局欄目 CSS 简体版

原文原文鏈接

採用20 / 80原則學習和使用 Grid 佈局。css

介紹

本文不會覆蓋Grid 佈局的全部細節，而是面向那些想快速用起來並看到效果的大家。我將會向你介紹 Grid 技術的20%，學會了這些你就掌握了Grid 功力的80%了，開心不🤒。html

爲何只有 20%?

For a programmer, laziness is a virture from Larry Wall

譯：你懶你有理。在儘量的狀況下，一個程序員應該尋求效率(懶惰的出路)。咱們平常學習也是這樣，有些時候可能已經很努力可是就是沒有提升。大概就是咱們把80%的精力放在的那沒有什麼卵用的20%上了,說的好像是一步本身呢。前端

CSS 的 Grid 佈局模塊挺複雜的，比 FlexBox 佈局還要複雜(學習 Flex 佈局就很吃力了)。並非由於 Grid 佈局的理論困難，只是該模塊引入了18個新的屬性在傳統的 CSS 佈局理念中是前所未聞的。程序員

額~，那麼我們是否須要當即理解掌握全部新的屬性呢？NO,沒有必要，並且你也記不住，就算記住了一時你也記不住一世。編程

只須要學習一點點就能夠實現你想要的效果，而後你能夠繼續深刻研究其餘屬性。小程序

CSS Grid 佈局是什麼？

若是你初學 CSS,那麼 Grid佈局對你來講可能有一點怪異。那麼你是否知道 Flexbox呢？瀏覽器

我喜歡把 Grid 佈局看做是目前比較成熟的 Flexbox 佈局的弟弟。app

處理 CSS 佈局一般是複雜繁瑣的。Flexbox的到來給網頁佈局帶來了新但願，即將普及的 Grid 會給咱們帶來更多。編程語言

目標導向

學完原文你能夠實現一個響應式的音樂應用的佈局。
ide

Part 1: 其中的10%（1/2）----基本術語

Grid 容器

在咱們曾實現過、見過的任何應用程序，從視覺呈現本質上來看，都是在必定的邊界範圍內將內容塊進行排列，安放。

簡單來看，一個"網格"就是多條相交的線（水平和垂直的線）規劃出能夠容納其餘元素的位置空間。

若是你有使用過adobe、photoshop、sketch 這類軟件的話，那麼你就能夠很容易的理解。

在 CSS Grid 佈局的語義中，Grid 容器是能夠容納網格全部子項的一個載體（Grid 世界的爸爸）。

假設你有個佈局需求，如圖：

佈局是由一個網格容器和多個單元格組成。最外層且最大的矩形做爲整個佈局的載體既網格容器；小一點的矩形爲單元格。

網格線

圖中橫線和縱線，用來劃分網格容器。

網格單元

網格單元是網格佈局中的最小單元，它是由4條相鄰的網格線圍成的。

網格區域

網格區域最小佔據一個網格單元，最大能夠佔領整個網格容器。
下圖中,四個網格單元所覆蓋的區域構成一個網格區域。

網格軌道

我很是不喜歡學術定義。網格軌道可被視爲是列或行的另外一個花哨的別名。任何兩個網格線之間的空間。

綜上，咱們已經學習完目標的一半了，但願你還有耐心讀下去。

Part 2: 後1/2部分

已經瞭解了基本術語，讓咱們玩起來吧

聲明一個網格

就像Flexbox,一切始於一行代碼。display: grid或者display: inline-grid。

舉例說明，讓 div標籤做爲網格容器：

div {
  display: grid;
}

聲明行和列

一個網格容器若是沒有行和列那還有什麼意義? 建立網格容器的列和行,你要用到如下兩個新的css屬性grid-template-columns 和 grid-template-rows。

那麼如何使用他們呢?很簡單~

grid-template-columns用來聲明列們，grid-template-rows用來聲明行們。

你給屬性傳遞幾個值，那麼相應就會劃分幾行或幾列。例如:

grid-template-columns: 100px 200px 300px

上面的代碼就會將網格容器劃分爲三列，列的寬度分別爲100px、200px和300px

grid-template-rows: 100px 200px 300px

該代碼會將網格容器劃分爲3行，行寬分別爲100px 200px 300px

讓咱們將兩行代碼同時做用於容器,那麼咱們就會獲得一個三行三列的網格。

grid-template-columns: 100px 200px 300px
grid-template-rows: 100px 200px 300px

Part 3: 是時候寫點代碼了

爲了快速的實現一個音樂 App，咱們會使用 CodePen進行開發。

搭建html 結構

至於爲啥寫成這樣，請繼續讀下去。

<body>
   <aside></aside>
   <main></main>
   <footer></footer>
</body>

body 做爲音樂容器

body {
   display: grid;
   min-height: 100%
}

上述代碼已經使 body 變成了一個網格容器，繼續聲明行和列。

容器規劃

該如何規劃網格的行和列呢，讓咱們回顧下音樂 APP 的長相。

好，那麼咱們大概能夠將佈局劃分爲兩行兩列。

就上面的圖進行構思，有幾點須要注意：
關於列：

第一列必須固定寬度50px
第2列填滿剩餘空間

關於行：

第2行固定高度100px
第一行自動填滿剩餘高度

幸運的是 Grid 佈局提供了一個新的單位能夠解決上述問題。fr分數單位。該單位能夠解決自動分配剩餘空間的問題。

若是你須要三個等寬的列，fr單位會自動均勻地分配空間。

若是你的業務還想添加更多的元素，也不要恐慌，fr 單位會自動完成。

更爲巧妙的是，若是你有一個固定寬度的元素，你也能夠很好的處理剩餘空間。

body {
   ...
   grid-template-rows: 1fr 100px;
   grid-template-columns: 50px 1fr;
}

若是對 fr 單位還有疑問的話，請閱讀the CSS Fractional Unit (Fr) In Approachable, plain Language.

使用網格區域來放置子元素

咱們已經聲明好了一個網格系統，如今讓咱們繼續實現它。本小節的目的學會使用網格區域來佈局子元素。請回憶一下，網格區域是由4條網格線劃分出來的區域。

唉實在不想翻譯了，直接給出代碼並解釋吧。劃分區域要使用到另外一個新的特性grid-template-areas。grid-template-areas提供了很是所見及所得的一種方式進行劃分區域。

body {
      ...
      grid-template-areas: "sidebar  content"
                           "footer   footer";
}

上述代碼的意思是。。。。。

咱們再來概括一下全部的代碼：
容器

body {
      display: grid;
      grid-template-columns: 40px 1fr;
      grid-template-rows: 1fr 90px;
      grid-template-areas: "sidebar  content"
                           "footer  footer";
}

子元素

.main {
  grid-area: content;
}
.footer {
  grid-area: footer;
}
.aside {
  grid-area: sidebar;
}

code

知識點回顧

網格容器、網格單元、網格線、網格區域、網格軌道
容器屬性 display: grid、grid-template-columns、grid-template-rows、grid-template-areas
分數單位 fr
容器屬性 grid-area

原文更精彩
 cssgridgarden練習廠

翻譯中，摻雜了我的愚見，請你們參考原文。
🌚 前端學習QQ羣: 538631558 🌚

【開發環境推薦】 Cloud Studio 是基於瀏覽器的集成式開發環境，支持絕大部分編程語言，包括 HTML五、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，無需下載安裝程序，一鍵切換開發環境。 Cloud Studio提供了完整的 Linux 環境，而且支持自定義域名指向，動態計算資源調整，能夠完成各類應用的開發編譯與部署。