這篇文章主要介紹“怎么學(xué)習(xí)CSS Grid布局”，在日常操作中，相信很多人在怎么學(xué)習(xí)CSS Grid布局問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么學(xué)習(xí)CSS Grid布局”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶(hù)真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶(hù)帶來(lái)驚喜。創(chuàng)新互聯(lián)公司推出湘鄉(xiāng)免費(fèi)做網(wǎng)站回饋大家。

為什么只有 20%?

  For a programmer, laziness is a virture from Larry Wall

譯：你懶你有理。在盡可能的情況下，一個(gè)程序員應(yīng)該尋求效率(懶惰的出路)。我們?nèi)粘W(xué)習(xí)也是這樣，有些時(shí)候可能已經(jīng)很努力但是就是沒(méi)有提高。大概就是我們把80%的精力放在的那沒(méi)有什么卵用的20%上了,說(shuō)的好像是一步自己呢。

CSS 的 Grid 布局模塊挺復(fù)雜的，比 FlexBox 布局還要復(fù)雜(學(xué)習(xí) Flex 布局就很吃力了)。并不是因?yàn)?Grid 布局的理論困難，只是該模塊引入了18個(gè)新的屬性在傳統(tǒng)的 CSS 布局理念中是前所未聞的。

額~，那么咱們是否需要立即理解掌握所有新的屬性呢？NO,沒(méi)有必要，而且你也記不住，就算記住了一時(shí)你也記不住一世。

只需要學(xué)習(xí)一點(diǎn)點(diǎn)就可以實(shí)現(xiàn)你想要的效果，然后你可以繼續(xù)深入研究其他屬性。

CSS Grid 布局是什么？

如果你初學(xué) CSS,那么 Grid布局對(duì)你來(lái)說(shuō)可能有一點(diǎn)怪異。那么你是否知道 Flexbox呢？

我喜歡把 Grid 布局看作是目前比較成熟的 Flexbox 布局的弟弟。

處理 CSS 布局通常是復(fù)雜繁瑣的。Flexbox的到來(lái)給網(wǎng)頁(yè)布局帶來(lái)了新希望，即將普及的 Grid 會(huì)給我們帶來(lái)更多。

目標(biāo)導(dǎo)向

學(xué)完原文你可以實(shí)現(xiàn)一個(gè)響應(yīng)式的音樂(lè)應(yīng)用的布局。

Part 1: 其中的10%（1/2）----基本術(shù)語(yǔ)

Grid 容器

在我們?cè)鴮?shí)現(xiàn)過(guò)、見(jiàn)過(guò)的任何應(yīng)用程序，從視覺(jué)呈現(xiàn)本質(zhì)上來(lái)看，都是在一定的邊界范圍內(nèi)將內(nèi)容塊進(jìn)行排列，安放。

簡(jiǎn)單來(lái)看，一個(gè)"網(wǎng)格"就是多條相交的線(xiàn)（水平和垂直的線(xiàn)）規(guī)劃出可以容納其他元素的位置空間。

如果你有使用過(guò)adobe、photoshop、sketch 這類(lèi)軟件的話(huà)，那么你就可以很容易的理解。

在 CSS Grid 布局的語(yǔ)義中，Grid 容器是可以容納網(wǎng)格所有子項(xiàng)的一個(gè)載體（Grid 世界的爸爸）。

假設(shè)你有個(gè)布局需求，如圖：

布局是由一個(gè)網(wǎng)格容器和多個(gè)單元格組成。最外層且***的矩形作為整個(gè)布局的載體既網(wǎng)格容器；小一點(diǎn)的矩形為單元格。

網(wǎng)格線(xiàn)

圖中橫線(xiàn)和縱線(xiàn)，用來(lái)劃分網(wǎng)格容器。

網(wǎng)格單元

網(wǎng)格單元是網(wǎng)格布局中的最小單元，它是由4條相鄰的網(wǎng)格線(xiàn)圍成的。

網(wǎng)格區(qū)域

網(wǎng)格區(qū)域最小占據(jù)一個(gè)網(wǎng)格單元，***可以占領(lǐng)整個(gè)網(wǎng)格容器。

下圖中,四個(gè)網(wǎng)格單元所覆蓋的區(qū)域構(gòu)成一個(gè)網(wǎng)格區(qū)域。

網(wǎng)格軌道

我非常不喜歡學(xué)術(shù)定義。網(wǎng)格軌道可被視為是列或行的另一個(gè)花哨的別名。任何兩個(gè)網(wǎng)格線(xiàn)之間的空間。

綜上，我們已經(jīng)學(xué)習(xí)完目標(biāo)的一半了，希望你還有耐心讀下去。

Part 2: 后1/2部分

已經(jīng)了解了基本術(shù)語(yǔ)，讓我們玩起來(lái)吧

聲明一個(gè)網(wǎng)格

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

舉例說(shuō)明，讓 div標(biāo)簽作為網(wǎng)格容器：

div {    display: grid;  }

聲明行和列

一個(gè)網(wǎng)格容器如果沒(méi)有行和列那還有什么意義? 創(chuàng)建網(wǎng)格容器的列和行,你要用到以下兩個(gè)新的css屬性grid-template-columns 和 grid-template-rows。

那么如何使用他們呢?很簡(jiǎn)單~

grid-template-columns用來(lái)聲明列們，grid-template-rows用來(lái)聲明行們。

你給屬性傳遞幾個(gè)值，那么相應(yīng)就會(huì)劃分幾行或幾列。例如:

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

上面的代碼就會(huì)將網(wǎng)格容器劃分為三列，列的寬度分別為100px、200px和300px

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

該代碼會(huì)將網(wǎng)格容器劃分為3行，行寬分別為100px 200px 300px

讓我們將兩行代碼同時(shí)作用于容器,那么我們就會(huì)得到一個(gè)三行三列的網(wǎng)格。

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

Part 3: 是時(shí)候?qū)扅c(diǎn)代碼了?

為了快速的實(shí)現(xiàn)一個(gè)音樂(lè) App，我們會(huì)使用 CodePen進(jìn)行開(kāi)發(fā)。

搭建html 結(jié)構(gòu)

至于為啥寫(xiě)成這樣，請(qǐng)繼續(xù)讀下去。

body 作為音樂(lè)容器

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

上述代碼已經(jīng)使 body 變成了一個(gè)網(wǎng)格容器，繼續(xù)聲明行和列。

容器規(guī)劃

該如何規(guī)劃網(wǎng)格的行和列呢，讓我們回顧下音樂(lè) APP 的長(zhǎng)相。

好，那么我們大概可以將布局劃分為兩行兩列。

就上面的圖進(jìn)行構(gòu)思，有幾點(diǎn)需要注意：

關(guān)于列：

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. ***列必須固定寬度50px

3. 第2列填滿(mǎn)剩余空間

關(guān)于行：

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. 第2行固定高度100px

3. ***行自動(dòng)填滿(mǎn)剩余高度

幸運(yùn)的是 Grid 布局提供了一個(gè)新的單位可以解決上述問(wèn)題。fr分?jǐn)?shù)單位。該單位可以解決自動(dòng)分配剩余空間的問(wèn)題。

如果你需要三個(gè)等寬的列，fr單位會(huì)自動(dòng)均勻地分配空間。

如果你的業(yè)務(wù)還想添加更多的元素，也不要恐慌，fr 單位會(huì)自動(dòng)完成。

更為巧妙的是，如果你有一個(gè)固定寬度的元素，你也可以很好的處理剩余空間。

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

如果對(duì) fr 單位還有疑問(wèn)的話(huà)，請(qǐng)閱讀the CSS Fractional Unit (Fr) In Approachable, plain Language.

使用網(wǎng)格區(qū)域來(lái)放置子元素

我們已經(jīng)聲明好了一個(gè)網(wǎng)格系統(tǒng)，現(xiàn)在讓我們繼續(xù)實(shí)現(xiàn)它。本小節(jié)的目的學(xué)會(huì)使用網(wǎng)格區(qū)域來(lái)布局子元素。請(qǐng)回憶一下，網(wǎng)格區(qū)域是由4條網(wǎng)格線(xiàn)劃分出來(lái)的區(qū)域。

唉實(shí)在不想翻譯了，直接給出代碼并解釋吧。劃分區(qū)域要使用到另一個(gè)新的特性grid-template-areas。grid-template-areas提供了非常所見(jiàn)及所得的一種方式進(jìn)行劃分區(qū)域。

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

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

我們?cè)賮?lái)歸納一下所有的代碼：

容器

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

到此，關(guān)于“怎么學(xué)習(xí)CSS Grid布局”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！