亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Grid布局

發布時間:2020-08-03 04:19:16 來源:網絡 閱讀:436 作者:Positive咳咳 欄目:web開發

Gird布局是什么?

Grid(網格) 布局使我們能夠比以往任何時候都可以更靈活構建和控制自定義網格 ; 能夠將網頁分成具有簡單屬性的行和列來完成我們需要的網格布局。

Grid布局

CSS Grid 布局由兩個核心組成部分是 wrapper(父元素)和 items(子元素)。 wrapper 是實際的 grid(網格),items 是 grid(網格) 內的內容。

下面是一個 父元素,內部包含6個 子元素 :

<div class="box">
       <div >1</div>
       <div >2</div>
       <div >3</div>
       <div >4</div>
       <div >5</div>
       <div >6</div>
</div>

Grid布局

為了使其成為二維的網格容器,我們需要定義列和行:
創建3行(columns)2列(rows)

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

grid-template-columns 創建列;創建幾列就在后面寫幾個值;
grid-template-rows 創建行;創建幾行就在后面寫幾個值;

效果圖為:

Grid布局

為了確保能正確理解這些值與網格外觀之間的關系,請看一下這個例子。

CSS代碼

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

效果為:

Grid布局

是不是非常好理解,使用起來也非常簡單是不是?

覺得對您有幫助,麻煩您點個關注,如有不足,請多指教!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

上林县| 平和县| 卓尼县| 昌乐县| 固镇县| 罗田县| 奉化市| 威远县| 慈利县| 抚州市| 稷山县| 都匀市| 泗水县| 米脂县| 海林市| 云龙县| 万州区| 镇赉县| 紫阳县| 武乡县| 明溪县| 洱源县| 巧家县| 大名县| 漯河市| 德昌县| 三穗县| 崇左市| 琼中| 甘谷县| 新昌县| 梓潼县| 马山县| 宁波市| 辛集市| 德令哈市| 亚东县| 丹江口市| 象山县| 金昌市| 会同县|