grid布局快速入門

silvertheo 發布于2019-08-29 16:16 / 1604人閱讀

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

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

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

下面是一個 wrapper 元素，內部包含6個 items ：

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

.wrapper {
    display: grid;
}

Columns(列) 和 rows(行)

為了使其成為二維的網格容器，我們需要定義列和行。讓我們創建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個值表示三列，相應的數值表示列寬即都為100px。
grid-template-rows的2個值表示兩行，相應的數值表示行高即都為50px

得到的結果如下：

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

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

效果圖：

持續更新，歡迎大家指導！

GPU云服務器云服務器布局入門前端快速入門云計算快速入門 css快速入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113637.html

grid布局快速入門

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

mist14 2019-08-02 11:08 評論0 收藏0
翻譯 | CSS網格（CSS Grid）布局入門

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

Ashin 2019-08-29 13:18 評論0 收藏0
前端入門24-響應式布局（BootStrap）

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

lunaticf 2019-04-23 13:06 評論0 收藏0
css grid布局入門

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

wzyplus 2019-08-29 17:06 評論0 收藏0