CSS 響應式網格檢視

響應式網頁總是使用網格佈局結構，因為它可以輕鬆適應不同的螢幕尺寸和裝置。本章將討論響應式Web開發中的網格檢視以及如何設計基於網格的響應式網站。

什麼是網格檢視？

在響應式網頁設計中，網格檢視是一種佈局結構，它使用基於網格的系統將佈局元素排列在行和列中。典型的網格檢視可能包含12列，總寬度為100%。網格將隨著瀏覽器大小的變化而收縮和擴充套件。

構建響應式網格檢視

設定邊框盒：首先，我們需要為網頁中的所有元素設定box-sizing屬性為`border-box`。這將確保內邊距和邊框包含在所有元素的總寬度和高度中。使用以下程式碼進行設定：

* {
    box-sizing: border-box;
}

設定列寬：接下來，我們必須確定網頁佈局中需要多少列。例如，如果我們需要一個3列布局，則一列的寬度將為100% / 3列 = 33.33%。
使用媒體查詢：為了確保響應性，我們必須使用媒體查詢進行螢幕相關的樣式設定。透過此方式，我們可以為螢幕寬度新增斷點，在這些斷點處需要更改佈局。

網格行和列

在 CSS 中，我們可以定義佈局中所需的列數和行數。每個單元格將代表一個網格項。以下程式碼顯示瞭如何在網格中定義行和列。

示例

在這個例子中，我們將建立兩個網格佈局，一個是行佈局，另一個是列布局，每個網格都有行和列。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .grid-container {
            display: grid;
            gap: 10px;
            padding: 10px;
            width: 75%;
        }
        .grid-item {
            background-color: #4CAF50;
            border: 1px solid #ddd;
            padding: 20px;
            text-align: center;
            font-size: 1.2em;
            color: white;
        }
        .row{
            grid-template-columns: 1fr;
            grid-template-rows: repeat(3, 1fr);
        }
        .column{
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 1fr;
        }
    </style>
</head>
<body>
    <h1>Grid Layout Example</h1>
    <h3>Grid Rows</h3>
    <div class="grid-container row">
      <div class="grid-item item1">
         Item 1
      </div>
      <div class="grid-item item2">
         Item 2
      </div>
      <div class="grid-item item3">
         Item 3
      </div>
    </div>
    
    <h3>Grid Columns</h3>
    <div class="grid-container column">
      <div class="grid-item item1">
         Item 1
      </div>
      <div class="grid-item item2">
         Item 2
      </div>
      <div class="grid-item item3">
         Item 3
      </div>
    </div>
</body>
</html>

12 列網格佈局

12 列布局結構包括將容器分成 12 個等寬的列，以便每個單獨的元素可以跨越指定數量的列來建立不同的部分。下圖顯示了 12 列布局的示例。

示例

以下程式碼顯示了設計響應式 12 列布局的示例。在 Tutorialspoint 的HTML編譯器中執行此程式碼，以檢視佈局如何隨寬度變化而變化。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>12-Column Grid Layout</title>
    <style>
        /* Basic Grid Container Styling */
        .grid-container {
            display: grid;
            grid-template-columns: repeat(12, 1fr); /* 12 equal-width columns */
            gap: 10px; /* Space between items */
            padding: 10px;
        }

        /* Column Spans */
        .col-span-12 {
            grid-column: span 12;
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
        }

        .col-span-8 {
            grid-column: span 8;
            background-color: #8BC34A;
            color: white;
            padding: 20px;
            text-align: center;
        }

        .col-span-4 {
            grid-column: span 4;
            background-color: #CDDC39;
            color: white;
            padding: 20px;
            text-align: center;
        }

        .col-span-3 {
            grid-column: span 3;
            background-color: #FFEB3B;
            color: black;
            padding: 20px;
            text-align: center;
        }

        /* Responsive Adjustments */
        @media (max-width: 400px) {
            .col-span-8, .col-span-4, .col-span-3 {
                grid-column: span 12; /* Make all elements full-width on smaller screens */
            }
        }
    </style>
</head>
<body>

<div class="grid-container">
    <!-- Header -->
    <div class="col-span-12">Header (12 columns)</div>

    <!-- Main Content and Sidebar -->
    <div class="col-span-8">Main Content (8 columns)</div>
    <div class="col-span-4">Sidebar (4 columns)</div>

    <!-- Footer Links -->
    <div class="col-span-3">Footer Link 1 (3 columns)</div>
    <div class="col-span-3">Footer Link 2 (3 columns)</div>
    <div class="col-span-3">Footer Link 3 (3 columns)</div>
    <div class="col-span-3">Footer Link 4 (3 columns)</div>
</div>

</body>
</html>

列印頁面