亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

grid布局快速入門

mist14 / 1749人閱讀

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

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

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

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


            
1

            
2

            
3

            
4

            
5

            
6

要把 wrapper 元素變成一個(gè) grid(網(wǎng)格)，只要簡(jiǎn)單地把其 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個(gè)值表示三列，相應(yīng)的數(shù)值表示列寬即都為100px。
grid-template-rows的2個(gè)值表示兩行，相應(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

  • grid布局快速入門

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

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

  • 翻譯 | 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

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

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

    lunaticf 評(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

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

0條評(píng)論

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