CSS Grid 網格佈局實現自適應9宮格

小鱷魚發表於2021-12-10
CSS

引用阮一峰老師話說網格佈局（Grid）是最強大的 CSS 佈局方案。CSS Grid 網格佈局教程

它將網頁劃分成一個個網格，可以任意組合不同的網格，做出各種各樣的佈局。以前，只能通過複雜的 CSS 框架達到的效果，現在瀏覽器內建了。

上圖這樣的佈局，就是 Grid 佈局的拿手好戲。

Grid 佈局與 Flex 佈局有一定的相似性，都可以指定容器內部多個專案的位置。但是，它們也存在重大區別。

Flex 佈局是軸線佈局，只能指定"專案"針對軸線的位置，可以看作是一維佈局。Grid 佈局則是將容器劃分成"行"和"列"，產生單元格，然後指定"專案所在"的單元格，可以看作是二維佈局。Grid 佈局遠比 Flex 佈局強大。

下面我給大家分享一個用grid實現的自適應9宮格，格子大小自定義，間隔不變，以前都是用dom計算，好蠢。
需要根據自己的佈局個數，來計算每個格子大小，主要是每個格子的寬高減去相應行和列間隔的大小，以九宮格為列，有3行3列，有行間距2 24px, 有列間距2 24px，每個格子的寬高都要減去48px / 3。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>grid</title>
</head>

<body>
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>


<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box
  }

  body {
    height: 100vh;
    padding: 20px;
  }

  .container {
    width: 100%;
    height: 100%;
    display: grid;
    /*行間距*/
    grid-row-gap: 24px;
    /*列間距*/
    grid-column-gap: 24px;
    /*每3行有2個行間距，所以每個格子的寬高都要減去(24*2) / 3 */
    grid-template-columns: repeat(3, calc(33.33% - 16px));
    grid-template-rows: repeat(3, calc(33.33% - 16px));
    overflow: hidden;
  }

  .item {
    background: #33a8a5;
  }
</style>

</html>

相關文章