資訊專欄INFORMATION COLUMN
摘要：網(wǎng)格單元格網(wǎng)格單元格是指四條網(wǎng)格線之間的空間。所以它是最小的單位，就像表格中的單元格。圖中突出顯示的網(wǎng)格區(qū)域是行線和列線之間的區(qū)域，其主要包括了四個網(wǎng)格單元格。
CSS Grid現(xiàn)在已經(jīng)被W3C納入到CSS3的一個布局模塊當(dāng)中，被稱為CSS Grid Layout Module。而我們較為熟悉的還是將其想像成網(wǎng)格或者柵格，也就是早期的960gs。不管是網(wǎng)格還是柵格或者現(xiàn)在的CSS Grid Layout Module，我想掌握這些技術(shù)對于我們將來在Web項目中實現(xiàn)布局只有好處沒有壞處。那么從今天開始我將和大家一起探討CSS中的網(wǎng)格布局。
為什么我們需要網(wǎng)格布局？在我們的Web內(nèi)容中，可以將其分割成很多個內(nèi)容塊，而這些內(nèi)容塊都占據(jù)自己的區(qū)域(regions)，可以將這些區(qū)域想像成是一個虛擬的網(wǎng)格。到目前為止，在一個模板中使用不同的結(jié)構(gòu)標(biāo)簽，使用多個浮動和手動計算實現(xiàn)一個布局。這對于Web前端人員來說，這是一件痛苦之事。而網(wǎng)格布局將讓你擺脫這樣的困局，讓你的布局方法變得非常簡單與清晰。
網(wǎng)格布局給了我們一種方法——創(chuàng)建的結(jié)構(gòu)與使用表格(table)布局并沒有什么不同。然而，他是在CSS中實現(xiàn)而不是在HTML中實現(xiàn)，同時還可以依賴于媒體查詢根據(jù)不同的上下文得新定義布局。這對于喜歡響應(yīng)式設(shè)計的同學(xué)來說是一個絕對利好的消息。因為你不在需要再擔(dān)心你的HTML結(jié)構(gòu)而影響你的布局。
網(wǎng)格布局還可以讓我們擺脫現(xiàn)在布局中存在的文檔流限制，換句話說，你的結(jié)構(gòu)不需要根據(jù)設(shè)計稿從上往上布置了。這也意味著您可以自由地更改頁面元素位置。這最適合你在不同的斷點位置實現(xiàn)你最需要的布局，而不再需要為響應(yīng)你的設(shè)計而擔(dān)心HTML結(jié)構(gòu)的問題。
什么是CSS Grid Layout?CSS Grid Layout是CSS為布局新增的一個模塊。網(wǎng)格布局特性主要是針對于Web應(yīng)用程序的開發(fā)者。可以用這個模塊實現(xiàn)許多不同的布局。網(wǎng)絡(luò)布局可以將應(yīng)用程序分割成不同的空間，或者定義他們的大小、位置以及層級。
就像表格一樣，網(wǎng)格布局可以讓W(xué)eb設(shè)計師根據(jù)元素按列或行對齊排列，但他和表格不同，網(wǎng)格布局沒有內(nèi)容結(jié)構(gòu)，從而使各種布局不可能與表格一樣。例如，一個網(wǎng)格布局中的子元素都可以定位自己的位置，這樣他們可以重疊和類似元素定位。
此外，沒有內(nèi)容結(jié)構(gòu)的網(wǎng)格布局有助于使用流體、調(diào)整順序等技術(shù)管理或更改布局。通過結(jié)合CSS的媒體查詢屬性，可以控制網(wǎng)格布局容器和他們的子元素，使用頁面的布局根據(jù)不同的設(shè)備和可用空間調(diào)整元素的顯示風(fēng)格與定位，而不需要去改變文檔結(jié)構(gòu)的本質(zhì)內(nèi)容。
瀏覽器兼容性眾觀下來，僅在IE10+上支持，而且也僅支持部分屬性。或許很多同學(xué)看到這樣的兼容性，又會止步，或者呵呵兩聲閃人了。不過我們學(xué)習(xí)是無防，在各瀏覽器中通過設(shè)置可以做測試效果，在下一次中將會向大家介紹如何在瀏覽器中開啟此功能。
Grid vs Flexbox在www-list郵件中常常會看到一種Pk的現(xiàn)像：談到網(wǎng)格就會扯到Flexbox。假設(shè)瀏覽器都支持這兩個模塊，你將選擇grid還是flexbox來給頁面布局。其實當(dāng)你了解兩者之后你會很輕松的做出選擇。flexbox是一維布局，他只能在一條直線上放置你的內(nèi)容區(qū)塊；而grid是一個二維布局。前面也簡單說到，你可以根據(jù)你的設(shè)計需求，將內(nèi)容區(qū)塊放置到任何你想要放的地方。那么不用多說，你應(yīng)該知道哪一種更適合你的布局。
網(wǎng)格術(shù)語想要玩轉(zhuǎn)CSS Grid Layout，就需要先了解網(wǎng)格給我們的一些新術(shù)語以及一些CSS屬性和值。在這一節(jié)中，將簡單的向大家解釋網(wǎng)格布局中的一些概念與術(shù)語。
網(wǎng)格線(Grid Lines)網(wǎng)格線組成了網(wǎng)格，他是網(wǎng)格的水平和垂直的分界線。一個網(wǎng)格線存在行或列的兩側(cè)。我們可以引用它的數(shù)目或者定義的網(wǎng)格線名稱。
上圖突出顯示的紅線就是第二列的網(wǎng)格線（line2）。
網(wǎng)格軌道(Grid Track)網(wǎng)格軌道是就是相鄰兩條網(wǎng)格線之間的空間，就好比表格中行或列。所在在網(wǎng)格中其分為grid column和grid row。每個網(wǎng)格軌道可以設(shè)置一個大小，用來控制寬度或高度。
圖中突出顯示的就是行線line2和line3之間組成的網(wǎng)格軌道。
網(wǎng)格單元格(Grid Cell)網(wǎng)格單元格是指四條網(wǎng)格線之間的空間。所以它是最小的單位，就像表格中的單元格。
圖中突出顯示的單元格是由行線line2、line3和列表line2、line3組成的。
網(wǎng)格區(qū)域(Grid Area)網(wǎng)格區(qū)域是由任意四條網(wǎng)格線組成的空間，所以他可能包含一個或多個單元格。相當(dāng)于表格中的合并單元格之后的區(qū)域。
圖中突出顯示的網(wǎng)格區(qū)域是行線line1、line3和列線line2、line4之間的區(qū)域，其主要包括了四個網(wǎng)格單元格。
網(wǎng)格容器(Grid Containers)通過使用display屬性給元素顯式設(shè)置了屬性值grid或inline-grid，此時這個元素將自動變成網(wǎng)格容器。這個類似于flexbox一樣，將元素設(shè)置設(shè)置為display:flex，元素將自動變成彈性盒模型。
由于網(wǎng)格容器不是塊容器，所以有部分屬性在網(wǎng)格布局中將會失效：
多列布局模塊中的所有column-*屬性運用在網(wǎng)格容器上將失效
float和clear使用在網(wǎng)格項目（網(wǎng)格單元格Grid Cell）上將失效
vertical-align使用在網(wǎng)格單元格上將失效
::first-line和::first-letter這樣的偽元素不能應(yīng)用在網(wǎng)格容器上
網(wǎng)格單元格順序(order)網(wǎng)格單元格順序和Flexbox模塊一樣，通過order屬性來對網(wǎng)格單父元格進行順序重排。
總結(jié)在這篇文章中簡單的介紹了CSS Grid Layout，以及為什么要使用他，并且介紹了其一些術(shù)語：網(wǎng)格線、網(wǎng)格軌道、網(wǎng)格單元格、網(wǎng)格區(qū)域和網(wǎng)格容器等，為后面如何學(xué)習(xí)和使用CSS Grid Layout做了一個鋪墊。希望這篇文章對于初學(xué)者有所幫助，如果您對此篇文章感興趣，請繼續(xù)觀注下一篇相關(guān)文章，將會向大家介紹如何在瀏覽器中開啟CSS Grid Layout模塊，讓你的測試用例能在瀏覽器中看到相關(guān)效果。
via w3cplus
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110982.html
摘要：你可以用網(wǎng)格這樣做這樣的顯示效果是沒什么錯誤的，當(dāng)使用網(wǎng)格，重新定義列數(shù)非常簡單。絕對定位當(dāng)我們絕對定位一個網(wǎng)格元素的時候，這個元素會跑到它的容器中，我們可以用和來定位它。最簡單的命名約定使用網(wǎng)格自動編號。 注：此文是我翻譯的第一篇技術(shù)文章。適合有一定CSS原生網(wǎng)格布局使用經(jīng)驗的開發(fā)者（讀前需要先去了解一下原生CSS網(wǎng)格的語法），原生CSS網(wǎng)格布局（Native CSS grid）截止...
摘要：你可以用網(wǎng)格這樣做這樣的顯示效果是沒什么錯誤的，當(dāng)使用網(wǎng)格，重新定義列數(shù)非常簡單。絕對定位當(dāng)我們絕對定位一個網(wǎng)格元素的時候，這個元素會跑到它的容器中，我們可以用和來定位它。最簡單的命名約定使用網(wǎng)格自動編號。 注：此文是我翻譯的第一篇技術(shù)文章。適合有一定CSS原生網(wǎng)格布局使用經(jīng)驗的開發(fā)者（讀前需要先去了解一下原生CSS網(wǎng)格的語法），原生CSS網(wǎng)格布局（Native CSS grid）截止...
摘要：基于網(wǎng)格線的占位區(qū)網(wǎng)格中的單元格是有網(wǎng)格線劃分出來的，那么在網(wǎng)格布局中，同樣可以使用網(wǎng)格線來給子元素設(shè)置占位區(qū)域。也就是說這四條網(wǎng)格線間的區(qū)域是一個單元格。 CSS Grid布局對于我等來說就是一個全新的布局，但國外很多同行朋友已對這種布局做了全面的探知。前面花了兩篇內(nèi)容（《CSS Grid布局：什么是網(wǎng)格布局》和《[CSS Grid布局：瀏覽器開啟CSS Grid Layout]ht...
摘要：簡單點說，就是由單元格慢慢過渡到具有合并單元格的布局在腦海中想想曾經(jīng)愛過的。基于網(wǎng)格線使用關(guān)鍵詞實現(xiàn)單元格合并在布局中除了使用網(wǎng)格線合并單元格之外，還可以使用關(guān)鍵詞來實現(xiàn)單元格合并。 《CSS Grid布局：網(wǎng)格單元格布局》一文中通過一些簡單的實例介紹了如何給容器定義網(wǎng)格，并且怎么使用網(wǎng)格線或者網(wǎng)格區(qū)域來實現(xiàn)單元格這樣的簡單的布局。在文章結(jié)尾之處也提到過，這樣的單元格如同表格一樣，僅僅...
摘要：和絕對定位和絕對定位如果父容器有定位標(biāo)識等，那么下面的子會根據(jù)原始它們應(yīng)該布局的位置定位，反之如果父容器沒有定位標(biāo)識，那么應(yīng)用了會脫離布局，并且按照傳統(tǒng)的方式布局。基本概念 MDN上的解釋是這樣的 CSS Grid Layout excels at dividing a page into major regions or defining the relationship in term...
閱讀 2142·2023-04-25 18:49
閱讀 1849·2019-08-30 14:02
閱讀 2648·2019-08-29 17:24
閱讀 3330·2019-08-28 18:10
閱讀 2932·2019-08-28 18:03
閱讀 496·2019-08-26 12:01
閱讀 3315·2019-08-26 11:31
閱讀 1433·2019-08-26 10:29
