Grid 佈局-子項補充及常用佈局

致于数据科学家的小陈發表於2024-06-01

上篇我們介紹了 Grid 佈局容器項的內容, 看上去屬性很多, 其實並沒有, 記住關鍵的概念和簡寫就行啦.

因為是二維的, 這個屬性的數量就比 flex 要多很多哦, 但其實真正也沒有常用那沒多啦.

  • 定義網格: grid-template-rows / grid-template-columns ;
  • 合併區域: grid-tempalte-areas / grid-area;
  • 網格間隙: gap: 10px 20px;
  • 子項對齊: place-items: end center;
  • 整塊對齊: place-content: start end;
  • 隱式網格: grid-auto-flow / grid-auto-rows;

覺得還是很好理解的, 然後今天的重點是關於子項的一些屬性的瞭解.

基於線的元素放置

  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end

這幾個子項屬性用來表示它佔據的區域的起始位置和終止位置, 包括水平和垂直方向.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子項: grid-column/row</title>
  <style>
    .main {
      width: 300px;
      height: 300px;
      background-color: pink;

      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
    }

    .main div:nth-of-type(1) {
      background-color: skyblue;

      grid-column-start: 2;
      grid-column-end: 3;

      /* 佔兩行, 預設是 auto */
      /* grid-row-start: 2;
      grid-row-end: 4; */
    }

    .main div:nth-of-type(2) {
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
  </div>
</body>
</html>

基於塊的擴充可以用 span 同時要了解這些屬性的各種簡寫.

  • grid-column: 2 / 3;
  • grid-row: 2 / 4;
  • grid-area: 2 / 2 / 4 / 3; 和上等價, 這尼瑪誰記得住...

還是老老實實寫一個個寫屬性, 雖然麻煩了點但是一看懂呀.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子項: grid-column/row</title>
  <style>
    .main {
      width: 300px;
      height: 300px;
      background-color: pink;

      display: grid;
      grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr [col4];
      grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4];
    }

    .main div:nth-of-type(1) {
      background-color: skyblue;

      /* span 表示個數, 從列2開始, 往後佔2個位置 */
      /* grid-column-start: 2;
      grid-column-end: span 2; */

      /* grid-column-start: col2;
      grid-column-end: col4; */

      /* 簡寫方式 */
      /* grid-column: 2 / 3;
      grid-row: 2 / 4; */

      grid-area: 2 / 2 / 4 / 3;


    }

    .main div:nth-of-type(2) {
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
  </div>
</body>
</html>

子項對齊方式

和容器項是差不多的, 只不是是針對單個子項而已啦.

  • justify-self
  • align-self
  • place-self

具體的演示就不搞了, 一看便知, 而且在實際中也很要用到, 即便用到查一下就行嘍.

repeat () 與 minmax()

  • repeat() 方法以及 auto-fill 可選值, 用於指定可重複的數值
  • minmax() 方法用來設定最小最大值的範圍

最終都是為了實現簡寫而已, 其實也沒啥.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>repeat</title>
  <style>
    .main {
      height: 400px;
      background-color: pink;
      display: grid;

      /* grid-template-columns: 100px 100px 100px; */
      /* grid-template-columns: repeat(3, 100px); */

      /* grid-template-columns: 100px repeat(2, 100px); */

      /* 列數不夠則會多出的會進行折行 */
      /* grid-template-columns: repeat(3, 100px); */

      /* 自動根據父容器填充個數, 非常方便 */
      grid-template-columns: repeat(auto-fill, 100px);

      grid-template-rows: 100px;
    }

    .main div {
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</body>
</html>

然後是 minmax(), 就設定最小/最大的尺寸唄, 限制一波.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>minmax</title>
  <style>
    .main {
      height: 400px;
      background-color: pink;
      display: grid;

      /* 兩側固定, 中間自適應 */
      /* grid-template-columns: 100px 1fr 100px; */

      /* 設定最大最小值, 這裡最小隻能是 100px 啦 */
      grid-template-columns: 100px minmax(100px, 1fr);

      grid-template-rows: 100px;

    }

    .main div {
      background-color: skyblue;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

佈局-響應式折行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>minmax</title>
  <style>
    .main {
      height: 400px;
      background-color: pink;
      display: grid;

      /* 最小是200px寬, 當解析度變化時, 會自動進行拉伸或者折行 */
      /* 響應式用得比較多呀, 當頁面變小時, 內容進行折行 */
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

      grid-template-rows: 100px;
      grid-auto-flow: 100px;
      gap: 20px 20px;

    }

    .main div {
      background-color: skyblue;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
  </div>
</body>
</html>

佈局 -元素疊加

就類似於我們在看影片時, 螢幕右上方顯示出 "直播" 的字樣, 其實就是元素疊加效果, 以前的佈局方式是採用 position -> 子絕父相 來實現. 但也可以用 grid 來輕鬆實現.

關鍵點就是, 讓子項元素佈局在同一個網格 透過 grid-area, 這樣就疊加啦.

它比定位要強的地方是, 能自適應的, 而定位可能不太好弄.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>疊加布局</title>
  <style>
    .main {
      width: 500px;
      height: 300px;
      background-color: pink;
      display: grid;
    }
    
    .main div {
      width: 500px;
      height: 300px;
      background-color: skyblue;

      grid-area: 1/1/1/1;
    }

    /* 直接透過子項 grid-area 讓兩個子項在一個區域不就疊加了嘛 */
    .main span {
      grid-area: 1/1/1/1;

      /* justify-self 調整下位置即可 */
      justify-self: end;
      margin: 10px;
    }

    .main p {
      grid-area: 1/1/1/1;
      align-self: end;
      margin: 0;
      background-color: rgba(0, 0, 0, 0.3);
      height: 30px;
      line-height: 30px;
      color: white;
      
    }
  </style>
</head>
<body>
  <div class="main">
    <div></div>
    <!-- 當容器項和子項一樣尺寸時, 後面的的元素則溢位容器 -->
    <span>直播</span>
    <p>正在熱賣中...</p>
  </div>
</body>
</html>

佈局-多種組合排列

類似網頁圖片展示, 圖片有大有小在頁面上進行展示, 其實就是 合併單元格, 合併區域.

應用的就是 grid-area: row-start column-start row-end, column-end (先橫後縱)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多行多列布局</title>
  <style>
    .main {
      width: 300px;
      height: 300px;
      background-color: pink;
      display: grid;

      /* 3 x 3 的佈局區域, 雖然實際只有6個塊 */
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 4px;
    }

    .main div {
      background-color: skyblue;
    }

    /* 對單元格1區域擴充, 其他的自己適應 */
    /* 四值的 grid-area: row-start column-start row-end, column-end (先橫後縱)*/
    .main div:nth-of-type(1) {
      /* grid-area: 1/1/span 2 / span 2; */
      /* grid-area: 2/1/span 2 / span 2; */
      grid-area: 1/2/span2/span2;
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</body>
</html>

佈局-柵格佈局

柵格佈局是響應式系統最核心的一個環節, 簡單理解就是柵格佈局會將網頁分為 12 或 24個柵格區域來劃分寬度.

從百分比的視角, 類似頁面的寬度是 100%; 如果是12個柵格, 則每個柵格的寬度是 8.33%;

如果一個容器的寬是3個柵格, 則其寬度為 8.33% * 3 = 24.99%.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>柵格佈局</title>
  <style>
    .row {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: 50px;
      grid-auto-flow: 20px;
      background-color: pink;
    }
    
    .row div {
      background-color: skyblue;
      border: 1px solid #000;
    }

    .row .col-1 {
      grid-area: auto/auto/auto/span 1;
    }
    .row .col-2 {
      grid-area: auto/auto/auto/span 2;
    }
    .row .col-3 {
      grid-area: auto/auto/auto/span 3;
    }
    .row .col-4 {
      grid-area: auto/auto/auto/span 4;
    }
    .row .col-5 {
      grid-area: auto/auto/auto/span 5;
    }
    .row .col-6 {
      grid-area: auto/auto/auto/span 6;
    }
    .row .col-7 {
      grid-area: auto/auto/auto/span 7;
    }
    .row .col-8 {
      grid-area: auto/auto/auto/span 8;
    }
    .row .col-9 {
      grid-area: auto/auto/auto/span 9;
    }
    .row .col-10 {
      grid-area: auto/auto/auto/span 10;
    }
    .row .col-11 {
      grid-area: auto/auto/auto/span 11;
    }
    .row .col-12 {
      grid-area: auto/auto/auto/span 12;
    }


  </style>
</head>
<body>
  <div class="row">
    <div class="col-6">1</div>
    <div class="col-3">2</div>
    <!-- 超出就換行了 -->
    <div class="col-4">4</div>
    <div class="col-4">5</div>
  </div>
</body>
</html>

佈局-容器自適應行列

grid 佈局最擅長的就是這種行列的二維佈局, 行或者列, 或者行列都能自適應哦, 強的一批.

先來看行自適應,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>行自適應</title>
  <style>
    .main {
      /* 容器不設高度, 讓盒子自動撐開, 寬度固定 */
      width: 300px;
      background-color: pink;
      display: grid;
      gap: 10px;

      grid-template-columns: repeat(3, 1fr);
      /* 隱式網格預設就是 rows 因此 grid-auto-flow: row 不用寫 */
      grid-auto-rows: 100px;
    }
    
    .main div {
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <!-- 隨著盒子增加, 會自動換行填充 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <!-- 隨著盒子增加, 會自動換行填充 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <!-- 隨著盒子增加, 會自動換行填充 -->
  </div>
</body>
</html>

再來看列自適應, 也是一樣的操作, 行高固定, 列寬不設即可.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>行自適應</title>
  <style>
    .main {
      /* 容器不設寬度, 讓盒子自動撐開, 高度固定 */
      height: 300px;
      background-color: pink;
      display: inline-grid;
      gap: 10px;

      grid-template-rows: repeat(3, 1fr);
      /* 列的話, 要設定隱式網格為 colum */
      grid-auto-flow: column;
      grid-auto-columns: 100px;
    }
    
    .main div {
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <!-- 隨著盒子增加, 會自動換列填充 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <!-- 隨著盒子增加, 會自動換列填充 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <!-- 隨著盒子增加, 會自動換列填充 -->
  </div>
</body>
</html>

至此, grid 子項的補充和一些常用的佈局也介紹到這裡啦, 用的是有能查就行.

相關文章