笙亿网络策划

CSS RWD Grid View 怎么实现？响应式网格布局该怎么做？

约 8 分钟读完 1 阅
文章导读
Previous Quiz Next 响应式网页总是使用 grid layout 结构，因为它可以轻松适应不同的屏幕尺寸和设备。本章我们将讨论响应式网页开发中的 grid view，以及如何设计基于 grid 的响应式网站。
📋 目录
  1. A 什么是 Grid View？
  2. B 构建响应式 Grid-View
  3. C Grid 行和列
  4. D Grid 12 列布局
A A

CSS 响应式网格视图

Previous
Quiz
Next

响应式网页总是使用 grid layout 结构，因为它可以轻松适应不同的屏幕尺寸和设备。本章我们将讨论响应式网页开发中的 grid view，以及如何设计基于 grid 的响应式网站。

什么是 Grid View？

在响应式网页设计中，grid view 是一种使用基于 grid 的系统将布局元素排列成行和列的布局结构。典型的 grid-view 可能有 12 列，总宽度为 100%。当浏览器尺寸变化时，grid 会收缩或扩展。

构建响应式 Grid-View

  • 设置 Border Box：首先，我们需要为网页中的所有元素设置 box-sizing 属性为 `border-box`。这将确保 padding 和 border 包含在所有元素的总宽度和高度中。使用以下代码设置：
* {
    box-sizing: border-box;
}
  • 设置列宽度：接下来，我们需要决定网页布局需要多少列。例如，我们需要 3 列布局，那么一列的宽度将是 100% / 3 列 = 33.33%。
  • 使用 Media Queries：为了确保响应式，我们必须使用 media queries 来实现屏幕相关的样式。这样我们可以在布局需要改变的屏幕宽度处添加断点。

    • Grid 行和列

    在 CSS 中，我们可以定义布局所需的列数和行数。每个单元格将代表一个 grid item。以下代码展示了如何在 grid 中定义行和列。

    示例

    在这个示例中，我们将创建两种 grid layout，一种是行布局，另一种是列布局，每个 grid 都有行和列。

    <!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>

    Grid 12 列布局

    12 列布局结构是将容器分为 12 个等宽列，这样每个独立元素可以跨越指定数量的列来创建不同的区域。下面的图片展示了一个 12 列布局的示例。

    12 column Layout example

    示例

    以下代码展示了如何设计一个响应式的 12 列布局。在 HTML Compiler 中运行此代码，即可查看布局如何随宽度变化。

    <!DOCTYPE html>
<html lang="en">
<head>
    <title>12-Column Grid Layout</title>
    <style>
        /* 基础 Grid 容器样式 */
        .grid-container {
            display: grid;
            grid-template-columns: repeat(12, 1fr); /* 12 个等宽列 */
            gap: 10px; /* 元素间距 */
            padding: 10px;
        }

        /* 列跨度 */
        .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;
        }

        /* 响应式调整 */
        @media (max-width: 400px) {
            .col-span-8, .col-span-4, .col-span-3 {
                grid-column: span 12; /* 在小屏幕上让所有元素全宽 */
            }
        }
    </style>
</head>
<body>

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

    <!-- 主要内容和侧边栏 -->
    <div class="col-span-8">Main Content (8 columns)</div>
    <div class="col-span-4">Sidebar (4 columns)</div>

    <!-- 页脚链接 -->
    <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>