資訊專欄INFORMATION COLUMN
摘要：布局是什么網(wǎng)格布局使我們能夠比以往任何時候都可以更靈活構(gòu)建和控制自定義網(wǎng)格能夠?qū)⒕W(wǎng)頁分成具有簡單屬性的行和列來完成我們需要的網(wǎng)格布局。布局由兩個核心組成部分是父元素和子元素。是實際的網(wǎng)格，是網(wǎng)格內(nèi)的內(nèi)容。
Gird布局是什么？
Grid(網(wǎng)格) 布局使我們能夠比以往任何時候都可以更靈活構(gòu)建和控制自定義網(wǎng)格 ; 能夠?qū)⒕W(wǎng)頁分成具有簡單屬性的行和列來完成我們需要的網(wǎng)格布局。
CSS Grid 布局由兩個核心組成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是實際的 grid(網(wǎng)格)，items 是 grid(網(wǎng)格) 內(nèi)的內(nèi)容。
下面是一個 父元素，內(nèi)部包含6個 子元素 ：
123456
為了使其成為二維的網(wǎng)格容器，我們需要定義列和行：
創(chuàng)建3行(columns)2列(rows)
.box{
display: grid;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px;
}
grid-template-columns 創(chuàng)建列；創(chuàng)建幾列就在后面寫幾個值；
grid-template-rows 創(chuàng)建行；創(chuàng)建幾行就在后面寫幾個值；
效果圖為：
為了確保能正確理解這些值與網(wǎng)格外觀之間的關(guān)系，請看一下這個例子。
CSS代碼
.box{
display: grid;
grid-template-columns: 300px 150px 50px;
grid-template-rows: 150px 50px;
}
效果為：
是不是非常好理解，使用起來也非常簡單是不是？
覺得對您有幫助，麻煩您點個關(guān)注，如有不足，請多指教！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114714.html
摘要：瀏覽器兼容性網(wǎng)格布局從開始收到支持，微軟在會更新對網(wǎng)格布局的支持。微軟的瀏覽器和有一種比較舊的實現(xiàn)，所以有不少限制，我們會簡單介紹新的實現(xiàn)方式和老的實現(xiàn)方式之間的區(qū)別，這樣你能知道如何規(guī)避他們。 原文地址：Getting to know CSS Grid Layout 原文作者：Chris Wright 譯者：華翔 校對者：珂珂、干干 翻譯 | CSS網(wǎng)格（CSS Grid）布局入...
摘要：網(wǎng)格單元格被劃分之后每一個格子就是單元格，也是布局的最小單位。網(wǎng)格區(qū)域若干個單元格拼接而成的區(qū)域。網(wǎng)格間隙單元格與單元格之間的距離，可以垂直也可以水平。 前言 CSS網(wǎng)格布局用于將頁面分割成數(shù)個主要區(qū)域，或者用來定義組件內(nèi)部元素間大小、位置和圖層之間的關(guān)系。像表格一樣，網(wǎng)格布局讓我們能夠按行或列來對齊元素。 但是，使用CSS網(wǎng)格可能還是比CSS表格更容易布局。 例如，網(wǎng)格容器的子元素可...
摘要：簡介網(wǎng)格布局又稱網(wǎng)格，是一種二維網(wǎng)格布局系統(tǒng)。在處理網(wǎng)頁布局方面一直做的不是很好。網(wǎng)格容器中的所有子元素就會自動變成網(wǎng)格項目網(wǎng)格線組成網(wǎng)格線的分界線。 簡介 CSS網(wǎng)格布局（又稱網(wǎng)格），是一種二維網(wǎng)格布局系統(tǒng)。CSS在處理網(wǎng)頁布局方面一直做的不是很好。一開始我們用的是table（表格）布局，然后用float(浮動)，position（定位）和inline-block（行內(nèi)塊）布局，但是...
摘要：和絕對定位和絕對定位如果父容器有定位標識等，那么下面的子會根據(jù)原始它們應該布局的位置定位，反之如果父容器沒有定位標識，那么應用了會脫離布局，并且按照傳統(tǒng)的方式布局?；靖拍?MDN上的解釋是這樣的 CSS Grid Layout excels at dividing a page into major regions or defining the relationship in term...
摘要：代碼如下頁面內(nèi)容樣式接下來，將側(cè)邊欄和主內(nèi)容區(qū)域使用一個包含起來。列和行布局部分橫跨所有的列。也可以使用簡寫，起始值和結(jié)束值位于同一行上，并用斜杠分隔。設(shè)計方法總結(jié)以上的布局設(shè)計中，使用了來進行整體布局以及設(shè)計中的非線性部分。 CSS 浮動屬性一直是網(wǎng)站上排列元素的主要方法之一，但是當實現(xiàn)復雜布局時，這種方法不總是那么理想。幸運的是，在現(xiàn)代網(wǎng)頁設(shè)計時代，使用 Flexbox 和 CSS...
摘要：基于網(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...
閱讀 1453·2023-04-25 19:00
閱讀 4156·2021-11-17 17:00
閱讀 1768·2021-11-11 16:55
閱讀 1526·2021-10-14 09:43
閱讀 3130·2021-09-30 09:58
閱讀 858·2021-09-02 15:11
閱讀 2128·2019-08-30 12:56
閱讀 1406·2019-08-30 11:12
