Grid佈局

Gird佈局是什麼？

Grid(網格) 佈局使咱們可以比以往任什麼時候候均可以更靈活構建和控制自定義網格 ; 可以將網頁分紅具備簡單屬性的行和列來完成咱們須要的網格佈局。

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

下面是一個 父元素，內部包含6個 子元素 ：

<div class="box">
	   <div style="background:skyblue;">1</div>
       <div style="background:darkblue;">2</div>
       <div style="background:saddlebrown;">3</div>
       <div style="background:fuchsia;">4</div>
       <div style="background:springgreen;">5</div>
       <div style="background:gold;">6</div>
</div>

複製代碼

爲了使其成爲二維的網格容器，咱們須要定義列和行： 建立3行(columns)2列(rows)

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

複製代碼

grid-template-columns 建立列；建立幾列就在後面寫幾個值； grid-template-rows 建立行；建立幾行就在後面寫幾個值；

效果圖爲：

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

CSS代碼

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

效果爲：

是否是很是好理解，使用起來也很是簡單是否是？

以爲對您有幫助，麻煩您點個關注，若有不足，請多指教！