溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么學習CSS Grid布局”，在日常操作中，相信很多人在怎么學習CSS Grid布局問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么學習CSS Grid布局”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
For a programmer, laziness is a virture from Larry Wall
譯：你懶你有理。在盡可能的情況下，一個程序員應(yīng)該尋求效率(懶惰的出路)。我們?nèi)粘W習也是這樣，有些時候可能已經(jīng)很努力但是就是沒有提高。大概就是我們把80%的精力放在的那沒有什么卵用的20%上了,說的好像是一步自己呢。
CSS 的 Grid 布局模塊挺復雜的，比 FlexBox 布局還要復雜(學習 Flex 布局就很吃力了)。并不是因為 Grid 布局的理論困難，只是該模塊引入了18個新的屬性在傳統(tǒng)的 CSS 布局理念中是前所未聞的。
額~，那么咱們是否需要立即理解掌握所有新的屬性呢？NO,沒有必要，而且你也記不住，就算記住了一時你也記不住一世。
只需要學習一點點就可以實現(xiàn)你想要的效果，然后你可以繼續(xù)深入研究其他屬性。
CSS Grid 布局是什么？
如果你初學 CSS,那么 Grid布局對你來說可能有一點怪異。那么你是否知道 Flexbox呢？
我喜歡把 Grid 布局看作是目前比較成熟的 Flexbox 布局的弟弟。
處理 CSS 布局通常是復雜繁瑣的。Flexbox的到來給網(wǎng)頁布局帶來了新希望，即將普及的 Grid 會給我們帶來更多。
學完原文你可以實現(xiàn)一個響應(yīng)式的音樂應(yīng)用的布局。
Grid 容器
在我們曾實現(xiàn)過、見過的任何應(yīng)用程序，從視覺呈現(xiàn)本質(zhì)上來看，都是在一定的邊界范圍內(nèi)將內(nèi)容塊進行排列，安放。
簡單來看，一個"網(wǎng)格"就是多條相交的線（水平和垂直的線）規(guī)劃出可以容納其他元素的位置空間。
如果你有使用過adobe、photoshop、sketch 這類軟件的話，那么你就可以很容易的理解。
在 CSS Grid 布局的語義中，Grid 容器是可以容納網(wǎng)格所有子項的一個載體（Grid 世界的爸爸）。
假設(shè)你有個布局需求，如圖：
布局是由一個網(wǎng)格容器和多個單元格組成。最外層且***的矩形作為整個布局的載體既網(wǎng)格容器；小一點的矩形為單元格。
網(wǎng)格線
圖中橫線和縱線，用來劃分網(wǎng)格容器。
網(wǎng)格單元
網(wǎng)格單元是網(wǎng)格布局中的最小單元，它是由4條相鄰的網(wǎng)格線圍成的。
網(wǎng)格區(qū)域
網(wǎng)格區(qū)域最小占據(jù)一個網(wǎng)格單元，***可以占領(lǐng)整個網(wǎng)格容器。
下圖中,四個網(wǎng)格單元所覆蓋的區(qū)域構(gòu)成一個網(wǎng)格區(qū)域。
網(wǎng)格軌道
我非常不喜歡學術(shù)定義。網(wǎng)格軌道可被視為是列或行的另一個花哨的別名。任何兩個網(wǎng)格線之間的空間。
綜上，我們已經(jīng)學習完目標的一半了，希望你還有耐心讀下去。
已經(jīng)了解了基本術(shù)語，讓我們玩起來吧
聲明一個網(wǎng)格
就像Flexbox,一切始于一行代碼。display: grid或者display: inline-grid。
舉例說明，讓 div標簽作為網(wǎng)格容器：
div { display: grid; }聲明行和列
一個網(wǎng)格容器如果沒有行和列那還有什么意義? 創(chuàng)建網(wǎng)格容器的列和行,你要用到以下兩個新的css屬性grid-template-columns 和 grid-template-rows。
那么如何使用他們呢?很簡單~
grid-template-columns用來聲明列們，grid-template-rows用來聲明行們。
你給屬性傳遞幾個值，那么相應(yīng)就會劃分幾行或幾列。例如:
grid-template-columns: 100px 200px 300px
上面的代碼就會將網(wǎng)格容器劃分為三列，列的寬度分別為100px、200px和300px
grid-template-rows: 100px 200px 300px
該代碼會將網(wǎng)格容器劃分為3行，行寬分別為100px 200px 300px
讓我們將兩行代碼同時作用于容器,那么我們就會得到一個三行三列的網(wǎng)格。
grid-template-columns: 100px 200px 300px grid-template-rows: 100px 200px 300px
為了快速的實現(xiàn)一個音樂 App，我們會使用 CodePen進行開發(fā)。
搭建html 結(jié)構(gòu)
至于為啥寫成這樣，請繼續(xù)讀下去。
<body> <aside></aside> <main></main> <footer></footer> </body>
body 作為音樂容器
body { display: grid; min-height: 100% }上述代碼已經(jīng)使 body 變成了一個網(wǎng)格容器，繼續(xù)聲明行和列。
容器規(guī)劃
該如何規(guī)劃網(wǎng)格的行和列呢，讓我們回顧下音樂 APP 的長相。
好，那么我們大概可以將布局劃分為兩行兩列。
就上面的圖進行構(gòu)思，有幾點需要注意：
關(guān)于列：
鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)
***列必須固定寬度50px
第2列填滿剩余空間
關(guān)于行：
鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)
第2行固定高度100px
***行自動填滿剩余高度
幸運的是 Grid 布局提供了一個新的單位可以解決上述問題。fr分數(shù)單位。該單位可以解決自動分配剩余空間的問題。
如果你需要三個等寬的列，fr單位會自動均勻地分配空間。
如果你的業(yè)務(wù)還想添加更多的元素，也不要恐慌，fr 單位會自動完成。
更為巧妙的是，如果你有一個固定寬度的元素，你也可以很好的處理剩余空間。
body { ... grid-template-rows: 1fr 100px; grid-template-columns: 50px 1fr; }如果對 fr 單位還有疑問的話，請閱讀the CSS Fractional Unit (Fr) In Approachable, plain Language.
使用網(wǎng)格區(qū)域來放置子元素
我們已經(jīng)聲明好了一個網(wǎng)格系統(tǒng)，現(xiàn)在讓我們繼續(xù)實現(xiàn)它。本小節(jié)的目的學會使用網(wǎng)格區(qū)域來布局子元素。請回憶一下，網(wǎng)格區(qū)域是由4條網(wǎng)格線劃分出來的區(qū)域。
唉實在不想翻譯了，直接給出代碼并解釋吧。劃分區(qū)域要使用到另一個新的特性grid-template-areas。grid-template-areas提供了非常所見及所得的一種方式進行劃分區(qū)域。
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
到此，關(guān)于“怎么學習CSS Grid布局”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼