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

資訊專欄INFORMATION COLUMN

grid布局快速入門

mist14 / 1692人閱讀

摘要：布局快速入門常用布局屬性介紹下面從一個簡單布局例子說起。布局由兩個核心組成部分是父元素和子元素。是實際的網(wǎng)格，是網(wǎng)格內(nèi)的內(nèi)容。讓我們創(chuàng)建列和行。的個值表示三列，相應(yīng)的數(shù)值表示列寬即都為。

Grid布局快速入門 常用Grid布局屬性介紹

下面從一個簡單Grid布局例子說起。
CSS Grid 布局由兩個核心組成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是實際的 grid(網(wǎng)格)，items 是 grid(網(wǎng)格) 內(nèi)的內(nèi)容。

下面是一個 wrapper 元素，內(nèi)部包含6個 items ：


            
1

            
2

            
3

            
4

            
5

            
6

要把 wrapper 元素變成一個 grid(網(wǎng)格)，只要簡單地把其 display 屬性設(shè)置為 grid 即可

.wrapper {
    display: grid;
}

Columns(列) 和 rows(行)

為了使其成為二維的網(wǎng)格容器，我們需要定義列和行。讓我們創(chuàng)建3列和2行。我們將使用grid-template-row和grid-template-column屬性。

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

grid-template-columns的3個值表示三列，相應(yīng)的數(shù)值表示列寬即都為100px。
grid-template-rows的2個值表示兩行，相應(yīng)的數(shù)值表示行高即都為50px

得到的結(jié)果如下：

我們可以變化一下行高跟列寬的值看下效果，代碼：

.wrapper {
    display: grid;
    grid-template-columns: 200px 50px 100px;
    grid-template-rows: 100px 50px;
}

效果圖：

持續(xù)更新，歡迎大家指導(dǎo)！

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

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

相關(guān)文章

  • grid布局快速入門

    摘要：布局快速入門常用布局屬性介紹下面從一個簡單布局例子說起。布局由兩個核心組成部分是父元素和子元素。是實際的網(wǎng)格，是網(wǎng)格內(nèi)的內(nèi)容。讓我們創(chuàng)建列和行。的個值表示三列，相應(yīng)的數(shù)值表示列寬即都為。 Grid布局快速入門 常用Grid布局屬性介紹 下面從一個簡單Grid布局例子說起。CSS Grid 布局由兩個核心組成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是實...

    silvertheo 評論0 收藏0

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

    摘要：瀏覽器兼容性網(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）布局入...

    Ashin 評論0 收藏0

  • 前端入門24-響應(yīng)式布局（BootStrap）

    摘要：聲明聲明本篇內(nèi)容摘抄自以下兩個來源中文網(wǎng)感謝大佬們的分享。版本是全球最受歡迎的前端組件庫，用于開發(fā)響應(yīng)式布局移動設(shè)備優(yōu)先的項目。官方示例官方示例版本，官方還沒有中文教程，的中文教程倒是很齊全了。聲明 本篇內(nèi)容摘抄自以下兩個來源： BootStrap中文網(wǎng) 感謝大佬們的分享。 正文-響應(yīng)式布局（BootStrap） 這次想來講講一個前端開發(fā)框架：BootStrap BootStrap 目前...

    lunaticf 評論0 收藏0

  • css grid布局入門

    摘要：簡介網(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)塊）布局，但是...

    wzyplus 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<