瀏覽器兼容

image.png

Grid布局概述

grid布局類似于傳統(tǒng)的table布局，但更加強大，性能也消耗也更小

table是在HTML實現(xiàn)，很容易觸發(fā)重排，性能消耗大；grid是在css中實現(xiàn)，功能也更強大

Grid，顧名思義，網(wǎng)格布局，相比flex的一維布局，Grid的布局是對行列同時定義的二維布局，功能更強大也更復雜。相比于已經(jīng)流行起來的flex布局，其兼容性只適用于IE10+的瀏覽器。

對于Grid布局，首先要了解網(wǎng)格的幾個基本內容：row(行)、column(列)、line(線)或gap(間距)、cell(單元格)、area(區(qū)域)，其中area代表一個或多個cell組成的內容

image.png

常用屬性

grid-template-columns和grid-template-rows

設置網(wǎng)格的行列數(shù)及寬高，寬高設置時可以使用固定長度也可使用 [number] fr 來設定響應式的寬高，類似于flex布局中的flex-grow。

示例代碼：3*3的網(wǎng)格，其中每個cell的高為100px，寬度自適應，將父容器等比例分為三部分

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px 100px;
/* 或使用以下寫法 */
/* grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(3, 100px); */
}

<div class="container">
    <div style="background-color: antiquewhite;">1</div>
    <div style="background-color: aqua;">2</div>
    <div style="background-color: blueviolet;">3</div>
    <div style="background-color: brown;">4</div>
    <div style="background-color: cadetblue;">5</div>
    <div style="background-color: chartreuse;">6</div>
    <div style="background-color: chocolate;">7</div>
    <div style="background-color: coral;">8</div>
    <div style="background-color: cornflowerblue;">9</div>
<div>

image.png

grid-auto-rows和grid-auto-columns

該屬性為網(wǎng)格設置默認寬度和高度，當未設置grid-template-columns、grid-template-rows等屬性的網(wǎng)格渲染時，會按照默認值來渲染

grid-template-columns: 200px 200px 1fr;
grid-template-rows: 200px;
grid-auto-rows: 100px;

image.png

grid-template-areas和grid-area

該屬性可為網(wǎng)格劃分區(qū)域

grid-template-areas: 
      "header header header header"
      "sidebar main main main"
      "footer footer footer footer"

.footer {
    grid-area: footer;
}

<div class="container">
  <div style="background-color: antiquewhite;">1</div>
  <div style="background-color: aqua;">2</div>
  <div style="background-color: blueviolet;">3</div>
  <div style="background-color: brown;">4</div>
  <div style="background-color: cadetblue;">5</div>
  <div style="background-color: chartreuse;" class="footer">6</div>
  <div style="background-color: chocolate;">7</div>
  <div style="background-color: coral;">8</div>
  <div style="background-color: cornflowerblue;">9</div>
</div>

image.png

row-gap和columns-gap

設置網(wǎng)格線的寬度，也可使用其語法糖grid-gap: row column;

示例代碼，將網(wǎng)格線的行列線分別設置為5px 10px

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);

    row-gap: 5px;
    columns-gap: 10px;
/* 或使用以下寫法 */
/* grid-gap: 5px 10px */
}

image.png

網(wǎng)格對齊屬性

justify-content、align-content是網(wǎng)格相對整個表格的對齊方式，具體屬性包含：start（默認值）、end、center、stretch、space-between、space-around、space-evenly

justify-items、align-items是網(wǎng)格內的內容相對于該網(wǎng)格的對齊方式，具體屬性包含：start（默認值）、end、center、stretch

justify-self、align-self寫在某個具體網(wǎng)格內，設定網(wǎng)格內的內容相對該網(wǎng)格的對齊方式，具體屬性包含：start（默認值）、end、center、stretch

justify-content: center;
align-content: center;

image.png

justify-items: center;
align-items: center;

image.png

justify-self: center;
align-self: center;

image.png

min-content與max-content

二者分別用于設置某列網(wǎng)格根據(jù)文本長度來自適應寬度

grid-template-columns: 200px min-content 200px;

image.png

grid-template-columns: 200px max-content 200px;

image.png

網(wǎng)格項屬性

網(wǎng)格線從左到右、從上到下序號依次為1,2,3,4......，網(wǎng)格在布局時，可以設置某個網(wǎng)格從某個網(wǎng)格線開始到某個網(wǎng)格線結束。用到屬性：grid-column-start、grid-column-end、grid-row-start、grid-row-end

.container > div:nth-of-type(1) {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
  }

image.png

設定網(wǎng)格1為第二個豎網(wǎng)格線開始到第四個豎網(wǎng)格線結束，第一個橫網(wǎng)格線開始到第三個網(wǎng)格線結束，也就是占據(jù)3*4網(wǎng)格的第2、3、5、6個表格

grid-row-end與grid-column-end還可使用 span+數(shù)字 的形式來設置該部分內容占據(jù)多少個網(wǎng)格，利用該特性可實現(xiàn)瀑布流布局

設置基礎grid布局，添加12個內容塊

.container {
    display: grid;
    grid-template-columns: 200px 200px 1fr;
    grid-template-rows: 200px;
    grid-auto-rows: 100px;
  }

為第1個內容塊與第6個內容塊分別添加樣式

<!-- 第一個內容塊添加 -->
grid-row-end: span 2;
<!-- 第六個內容塊添加 -->
grid-column-end: span 2;

image.png