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>

打印页面