資訊專(zhuān)欄INFORMATION COLUMN
摘要：網(wǎng)格線網(wǎng)格線有橫線和縱線，縱橫交錯(cuò)的線就將網(wǎng)格容器切割成了最小的單元單元格。單元格圖中綠色背景的塊就是單元格，網(wǎng)格布局的最小計(jì)量單位，該容器一共有個(gè)單元格。
下一篇 grid 布局入門(mén)
Grid，真的布局神器。Css在引入Flex布局和Grid布局兩個(gè)模塊后，才真正有了布局的概念。最初的table布局不知道是神馬鬼，再到 float 滿天飛，可能還要使用abosulte來(lái)實(shí)現(xiàn)頁(yè)面的布局?？傊瑢?shí)現(xiàn)起來(lái)特別別扭，要時(shí)刻注意：我這么寫(xiě)會(huì)不會(huì)塌陷，會(huì)不會(huì)給后面的元素造成影響，尼瑪為啥還串位了。筆者斗膽的稱這些實(shí)現(xiàn)為布局trick，F(xiàn)lex和Grid才是真的布局。Flex負(fù)責(zé)一維布局，Grid負(fù)責(zé)二維布局，兩個(gè)布局都非常強(qiáng)大，但是一個(gè)比一個(gè)難，屬性多到想吐血，誰(shuí)讓人家牛逼是模塊而不是屬性呢。今天我們只圍繞下圖來(lái)介紹Grid布局相關(guān)概念。
Grid布局開(kāi)始的地方，grid模塊的承載體。外部看來(lái)就是個(gè)塊也可能是inline-block塊，容器內(nèi)部一個(gè)格一個(gè)格的。和 Flex 布局一樣，它也分容器屬性和項(xiàng)目屬性。
網(wǎng)格線網(wǎng)格線有橫線和縱線，縱橫交錯(cuò)的線就將網(wǎng)格容器切割成了最小的單元單元格。網(wǎng)格線是有編號(hào)的，從數(shù)字1開(kāi)始編號(hào)。上圖中有6條橫線和6條縱線。如果你喜歡也可以給線起名字，一根線還能有多個(gè)名字。
Grid Cell 圖中綠色背景的塊就是單元格，網(wǎng)格布局的最小計(jì)量單位，該容器一共有25個(gè)單元格。
兩條相鄰的網(wǎng)格線中間部分就是軌道，為啥要有軌道的概念呢?因?yàn)樾枰O(shè)定軌道的寬度，如果將寬高多帶帶的設(shè)置到單元格上那很可能變成了瀑布流復(fù)雜程度嗖嗖地上升。再看看上圖的淺藍(lán)色和淺粉色軌道感受一下。
網(wǎng)格線、單元格、和軌道存在的意義就是將容器劃分出你所需要的區(qū)域Grid Area。區(qū)域是可包含多個(gè)單元格的一個(gè)整塊，那么如何劃分呢？?jī)蓷l橫的網(wǎng)格線和兩條縱的網(wǎng)格線交叉的部分就是區(qū)域了。將容器合理的劃分出多個(gè)區(qū)域，那么布局目的也達(dá)到了。區(qū)域是可以重疊的，所以它是有 z-index。
今天的概念部分就介紹到這里。后續(xù)會(huì)詳細(xì)的介紹 grid布局編程相關(guān)的知識(shí)。
ps: 圖片摘抄于CSS Grid布局：什么是網(wǎng)格布局
姊妹篇 深入理解布局神器 flexbox
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/112819.html
摘要：有開(kāi)始肯定就有結(jié)束，，是用來(lái)控制區(qū)域結(jié)束位置。還有的值都可以取負(fù)數(shù)的，負(fù)數(shù)意味著從后往前數(shù)。等價(jià)于表示橫跨幾個(gè)單元格。也一樣的是和的簡(jiǎn)寫(xiě)。 概念篇學(xué)完了概念好像沒(méi)啥用。今天我們來(lái)使用Grid完成兩個(gè)簡(jiǎn)單布局。 聲明容器 display: grid;或display: inline-grid;或display: subgrid;。grid 和 inline-grid 很好理解就是塊級(jí)網(wǎng)格...
摘要：如果你定義的內(nèi)容包含重復(fù)部分，你可以使用標(biāo)記去組織它。另外，也有一個(gè)比較復(fù)雜但是方便的語(yǔ)法指定三個(gè)屬性，示例如下與以下代碼是等價(jià)的因?yàn)闊o(wú)法隱式重置屬性，與。 簡(jiǎn)介 CSS 柵格布局 (亦稱 Grid)，是一個(gè)基于柵格的二維布局系統(tǒng)，旨在徹底改變基于網(wǎng)格用戶界面的設(shè)計(jì)。CSS 一直以來(lái)并沒(méi)有把布局做的足夠好。剛開(kāi)始，我們使用 tables，后來(lái)是 floats，positioning 和...
摘要：有談?wù)劽嬖嚺c面試題對(duì)于前端面試的一些看法。動(dòng)態(tài)規(guī)劃算法的思想及實(shí)現(xiàn)方法幫大家理清動(dòng)態(tài)規(guī)劃的解決思路以及原理方法前端經(jīng)典面試題從輸入到頁(yè)面加載發(fā)生了什么這是一篇開(kāi)發(fā)的科普類(lèi)文章，涉及到優(yōu)化等多個(gè)方面。極客學(xué)院前端練習(xí)題道練習(xí)題，面試季練練手。 由數(shù)據(jù)綁定和排序引入的幾個(gè) JavaScript 知識(shí)點(diǎn) 在 JavaScript 的數(shù)據(jù)綁定和做簡(jiǎn)單的表格排序中遇到的幾個(gè)知識(shí)點(diǎn) [[JS 基礎(chǔ)...
摘要：下面，本文將介紹幾個(gè)比較有代表性的柵格樣式庫(kù)，講述它們的簡(jiǎn)要原理和用法正確的打開(kāi)方式。雖然柵格樣式庫(kù)很棒，但它們并不是響應(yīng)式設(shè)計(jì)的全部。但在這個(gè)過(guò)程中，理解各類(lèi)柵格樣式庫(kù)的工作原理，正確使用它們，才能做出穩(wěn)定可靠的頁(yè)面結(jié)構(gòu)。 說(shuō)到柵格系統(tǒng)（grid system），你也許見(jiàn)過(guò)這樣的概念： showImg(https://segmentfault.com/img/bVmQnO); 像這樣...
摘要：聲明聲明本篇內(nèi)容摘抄自以下兩個(gè)來(lái)源中文網(wǎng)感謝大佬們的分享。版本是全球最受歡迎的前端組件庫(kù)，用于開(kāi)發(fā)響應(yīng)式布局移動(dòng)設(shè)備優(yōu)先的項(xiàng)目。官方示例官方示例版本，官方還沒(méi)有中文教程，的中文教程倒是很齊全了。聲明 本篇內(nèi)容摘抄自以下兩個(gè)來(lái)源： BootStrap中文網(wǎng) 感謝大佬們的分享。 正文-響應(yīng)式布局（BootStrap） 這次想來(lái)講講一個(gè)前端開(kāi)發(fā)框架：BootStrap BootStrap 目前...
閱讀 1083·2023-04-25 15:42
閱讀 3684·2021-11-02 14:38
閱讀 2951·2021-09-30 09:48
閱讀 1535·2021-09-23 11:22
閱讀 3504·2021-09-06 15:02
閱讀 3252·2021-09-04 16:41
閱讀 677·2021-09-02 15:41
閱讀 2092·2021-08-26 14:13
