成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Grid布局

levy9527 / 2861人閱讀

摘要：布局是什么網(wǎng)格布局使我們能夠比以往任何時(shí)候都可以更靈活構(gòu)建和控制自定義網(wǎng)格能夠?qū)⒕W(wǎng)頁分成具有簡(jiǎn)單屬性的行和列來完成我們需要的網(wǎng)格布局。布局由兩個(gè)核心組成部分是父元素和子元素。是實(shí)際的網(wǎng)格，是網(wǎng)格內(nèi)的內(nèi)容。

Gird布局是什么？

Grid(網(wǎng)格) 布局使我們能夠比以往任何時(shí)候都可以更靈活構(gòu)建和控制自定義網(wǎng)格 ; 能夠?qū)⒕W(wǎng)頁分成具有簡(jiǎn)單屬性的行和列來完成我們需要的網(wǎng)格布局。

CSS Grid 布局由兩個(gè)核心組成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是實(shí)際的 grid(網(wǎng)格)，items 是 grid(網(wǎng)格) 內(nèi)的內(nèi)容。

下面是一個(gè) 父元素，內(nèi)部包含6個(gè) 子元素 ：


       
1

       
2

       
3

       
4

       
5

       
6

為了使其成為二維的網(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)建幾列就在后面寫幾個(gè)值；
grid-template-rows 創(chuàng)建行；創(chuàng)建幾行就在后面寫幾個(gè)值；

效果圖為：

為了確保能正確理解這些值與網(wǎng)格外觀之間的關(guān)系，請(qǐng)看一下這個(gè)例子。

CSS代碼

.box{
          display: grid;
          grid-template-columns: 300px 150px 50px;
          grid-template-rows: 150px 50px;
        }

效果為：

是不是非常好理解，使用起來也非常簡(jiǎn)單是不是？

覺得對(duì)您有幫助，麻煩您點(diǎn)個(gè)關(guān)注，如有不足，請(qǐng)多指教！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53950.html

相關(guān)文章

  • 翻譯 | CSS網(wǎng)格（CSS Grid）布局入門

    摘要：瀏覽器兼容性網(wǎng)格布局從開始收到支持，微軟在會(huì)更新對(duì)網(wǎng)格布局的支持。微軟的瀏覽器和有一種比較舊的實(shí)現(xiàn)，所以有不少限制，我們會(huì)簡(jiǎn)單介紹新的實(shí)現(xiàn)方式和老的實(shí)現(xiàn)方式之間的區(qū)別，這樣你能知道如何規(guī)避他們。 原文地址：Getting to know CSS Grid Layout 原文作者：Chris Wright 譯者：華翔 校對(duì)者：珂珂、干干 翻譯 | CSS網(wǎng)格（CSS Grid）布局入...

    Ashin 評(píng)論0 收藏0

  • Grid布局——頁面布局如此簡(jiǎn)單

    摘要：網(wǎng)格單元格被劃分之后每一個(gè)格子就是單元格，也是布局的最小單位。網(wǎng)格區(qū)域若干個(gè)單元格拼接而成的區(qū)域。網(wǎng)格間隙單元格與單元格之間的距離，可以垂直也可以水平。 前言 CSS網(wǎng)格布局用于將頁面分割成數(shù)個(gè)主要區(qū)域，或者用來定義組件內(nèi)部元素間大小、位置和圖層之間的關(guān)系。像表格一樣，網(wǎng)格布局讓我們能夠按行或列來對(duì)齊元素。 但是，使用CSS網(wǎng)格可能還是比CSS表格更容易布局。 例如，網(wǎng)格容器的子元素可...

    Scorpion 評(píng)論0 收藏0

  • css grid布局入門

    摘要：簡(jiǎn)介網(wǎng)格布局又稱網(wǎng)格，是一種二維網(wǎng)格布局系統(tǒng)。在處理網(wǎng)頁布局方面一直做的不是很好。網(wǎng)格容器中的所有子元素就會(huì)自動(dòng)變成網(wǎng)格項(xiàng)目網(wǎng)格線組成網(wǎng)格線的分界線。 簡(jiǎn)介 CSS網(wǎng)格布局（又稱網(wǎng)格），是一種二維網(wǎng)格布局系統(tǒng)。CSS在處理網(wǎng)頁布局方面一直做的不是很好。一開始我們用的是table（表格）布局，然后用float(浮動(dòng))，position（定位）和inline-block（行內(nèi)塊）布局，但是...

    wzyplus 評(píng)論0 收藏0

  • CSS Grid 讀書筆記

    摘要：和絕對(duì)定位和絕對(duì)定位如果父容器有定位標(biāo)識(shí)等，那么下面的子會(huì)根據(jù)原始它們應(yīng)該布局的位置定位，反之如果父容器沒有定位標(biāo)識(shí)，那么應(yīng)用了會(huì)脫離布局，并且按照傳統(tǒng)的方式布局。基本概念 MDN上的解釋是這樣的 CSS Grid Layout excels at dividing a page into major regions or defining the relationship in term...

    liuhh 評(píng)論0 收藏0

  • 如何使用Flexbox和CSS Grid，實(shí)現(xiàn)高效布局

    摘要：代碼如下頁面內(nèi)容樣式接下來，將側(cè)邊欄和主內(nèi)容區(qū)域使用一個(gè)包含起來。列和行布局部分橫跨所有的列。也可以使用簡(jiǎn)寫，起始值和結(jié)束值位于同一行上，并用斜杠分隔。設(shè)計(jì)方法總結(jié)以上的布局設(shè)計(jì)中，使用了來進(jìn)行整體布局以及設(shè)計(jì)中的非線性部分。 CSS 浮動(dòng)屬性一直是網(wǎng)站上排列元素的主要方法之一，但是當(dāng)實(shí)現(xiàn)復(fù)雜布局時(shí)，這種方法不總是那么理想。幸運(yùn)的是，在現(xiàn)代網(wǎng)頁設(shè)計(jì)時(shí)代，使用 Flexbox 和 CSS...

    eternalshallow 評(píng)論0 收藏0

  • CSS Grid布局：網(wǎng)格單元格布局

    摘要：基于網(wǎng)格線的占位區(qū)網(wǎng)格中的單元格是有網(wǎng)格線劃分出來的，那么在網(wǎng)格布局中，同樣可以使用網(wǎng)格線來給子元素設(shè)置占位區(qū)域。也就是說這四條網(wǎng)格線間的區(qū)域是一個(gè)單元格。 CSS Grid布局對(duì)于我等來說就是一個(gè)全新的布局，但國外很多同行朋友已對(duì)這種布局做了全面的探知。前面花了兩篇內(nèi)容（《CSS Grid布局：什么是網(wǎng)格布局》和《[CSS Grid布局：瀏覽器開啟CSS Grid Layout]ht...

    maxmin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<