编程马·菜鸟教程

Appearance

第17章：拓展学习方向 ​

在掌握了Grid布局的基础和进阶技巧后，本章将介绍Grid布局的拓展学习方向，帮助你进一步提升Grid布局的应用能力，应对更复杂的布局场景。

17.1 Grid布局高级属性 ​

除了前面介绍的常用属性外，Grid布局还有一些高级属性，可以帮助你实现更复杂的布局效果。

17.1.1 grid-auto-flow ​

grid-auto-flow属性控制网格项目的自动排列方式，默认值为row，表示按行排列。

语法：

css
grid-auto-flow: row | column | row dense | column dense

值说明：

  • row：默认值，按行排列
  • column：按列排列
  • row dense：按行排列，并尽可能填补空白区域
  • column dense：按列排列，并尽可能填补空白区域

应用场景： 当网格项目的大小不同，或者使用了span跨越多个轨道时，使用dense值可以减少空白区域，使布局更紧凑。

示例：

css
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  grid-auto-flow: row dense;
}

.item1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.item2 {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.item3 {
  grid-column: 1;
  grid-row: 2 / span 2;
}

.item4 {
  grid-column: 2;
  grid-row: 2;
}

.item5 {
  grid-column: 2;
  grid-row: 3;
}

.item6 {
  grid-column: 3;
  grid-row: 3;
}

17.1.2 grid-auto-rows 和 grid-auto-columns ​

当网格项目数量超过grid-template-rows或grid-template-columns定义的轨道数量时，会自动创建新的轨道。grid-auto-rows和grid-auto-columns属性用于设置这些自动创建的轨道的尺寸。

语法：

css
grid-auto-rows: <track-size>...
grid-auto-columns: <track-size>...

示例：

css
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
  grid-auto-rows: 150px; /* 自动创建的行轨道高度为150px */
  gap: 10px;
}

17.1.3 grid-auto-columns ​

当使用grid-auto-flow: column时，grid-auto-columns属性用于设置自动创建的列轨道的尺寸。

示例：

css
.grid-container {
  display: grid;
  grid-template-rows: repeat(2, 100px);
  grid-auto-flow: column;
  grid-auto-columns: 150px; /* 自动创建的列轨道宽度为150px */
  gap: 10px;
}

17.1.4 grid 简写属性 ​

grid属性是一个简写属性，可以同时设置grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns和grid-auto-flow。

语法：

css
grid: <grid-template-rows> / <grid-template-columns>;
grid: <grid-template-areas>;
grid: <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];

示例：

css
/* 同时设置行和列轨道 */
.grid-container {
  grid: 100px 200px / 1fr 2fr 1fr;
}

/* 设置网格区域 */
.grid-container {
  grid: "header header header"
        "sidebar main main"
        "footer footer footer" / 200px 1fr 1fr;
}

/* 设置自动流和自动轨道尺寸 */
.grid-container {
  grid: row dense / 150px;
}

17.2 复杂布局实战 ​

17.2.1 瀑布流布局 ​

瀑布流布局是一种常见的布局方式，其中项目高度不同，排列成错落有致的瀑布状。使用Grid布局可以实现简单的瀑布流布局。

实现思路：

  1. 使用grid-template-columns设置固定的列数
  2. 使用grid-auto-rows设置行轨道的最小高度
  3. 使用grid-row-end: span N为不同高度的项目设置不同的跨度

示例：

css
.waterfall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 20px; /* 行轨道的最小高度 */
  gap: 10px;
  padding: 20px;
}

.waterfall-item {
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 15px;
}

.item1 {
  grid-row-end: span 10; /* 高度为20px * 10 = 200px */
}

.item2 {
  grid-row-end: span 15; /* 高度为20px * 15 = 300px */
}

.item3 {
  grid-row-end: span 12; /* 高度为20px * 12 = 240px */
}

.item4 {
  grid-row-end: span 8; /* 高度为20px * 8 = 160px */
}

.item5 {
  grid-row-end: span 14; /* 高度为20px * 14 = 280px */
}

.item6 {
  grid-row-end: span 11; /* 高度为20px * 11 = 220px */
}

17.2.2 masonry 布局 ​

Masonry布局是一种更复杂的瀑布流布局，其中项目的宽度和高度都可能不同。虽然纯CSS Grid布局实现完美的masonry布局有一定难度，但可以通过一些技巧来实现近似效果。

实现思路：

  1. 使用grid-template-columns设置固定的列数
  2. 使用grid-auto-rows: 1px设置非常小的行轨道高度
  3. 使用JavaScript计算每个项目的实际高度，并设置相应的grid-row-end值

示例：

html
<div class="masonry">
  <div class="masonry-item">内容1</div>
  <div class="masonry-item">内容2</div>
  <div class="masonry-item">内容3</div>
  <div class="masonry-item">内容4</div>
  <div class="masonry-item">内容5</div>
  <div class="masonry-item">内容6</div>
</div>
css
.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1px;
  gap: 10px;
  padding: 20px;
}

.masonry-item {
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 15px;
}
javascript
// 计算每个项目的高度并设置grid-row-end
function setupMasonry() {
  const items = document.querySelectorAll('.masonry-item');
  items.forEach(item => {
    const height = item.offsetHeight;
    item.style.gridRowEnd = `span ${Math.ceil(height / 1)}`;
  });
}

// 初始化
setupMasonry();

// 窗口大小改变时重新计算
window.addEventListener('resize', setupMasonry);

17.2.3 响应式仪表盘布局 ​

使用Grid布局可以创建响应式仪表盘布局，适应不同屏幕尺寸。

实现思路：

  1. 使用grid-template-columns和grid-template-rows设置网格结构
  2. 使用grid-column和grid-row控制项目的位置和跨度
  3. 使用媒体查询在不同屏幕尺寸下调整布局

示例：

css
.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 20px;
  padding: 20px;
}

.dashboard-title {
  grid-column: 1 / -1;
  font-size: 24px;
  font-weight: bold;
}

.widget {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.widget-large {
  grid-column: span 2;
  grid-row: span 2;
}

/* 平板端布局 */
@media (max-width: 1024px) {
  .dashboard {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .widget-large {
    grid-column: span 2;
    grid-row: span 1;
  }
}

/* 移动端布局 */
@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
  }
  
  .widget-large {
    grid-column: span 1;
  }
}

17.2.4 复杂的后台管理系统布局 ​

Grid布局非常适合创建复杂的后台管理系统布局，包括顶部导航、侧边栏、主内容区、面包屑导航等。

实现思路：

  1. 使用grid-template-areas定义布局结构
  2. 使用grid-template-columns和grid-template-rows设置轨道尺寸
  3. 使用媒体查询实现响应式布局

示例：

css
.admin-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar breadcrumb breadcrumb"
    "sidebar main main"
    "sidebar footer footer";
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: 60px auto 1fr 50px;
  min-height: 100vh;
}

.header {
  grid-area: header;
  background-color: #333;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #f8f9fa;
  border-right: 1px solid #e0e0e0;
  padding: 20px;
}

.breadcrumb {
  grid-area: breadcrumb;
  background-color: white;
  border-bottom: 1px solid #e0e0e0;
  padding: 10px 20px;
}

.main {
  grid-area: main;
  background-color: #f5f5f5;
  padding: 20px;
  overflow-y: auto;
}

.footer {
  grid-area: footer;
  background-color: white;
  border-top: 1px solid #e0e0e0;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .admin-layout {
    grid-template-areas:
      "header"
      "breadcrumb"
      "main"
      "footer";
    grid-template-columns: 1fr;
    grid-template-rows: 60px auto 1fr 50px;
  }
  
  .sidebar {
    display: none;
  }
}

17.3 前端框架中的Grid布局应用 ​

Grid布局在现代前端框架中得到了广泛应用，下面介绍如何在Vue、React等框架中使用Grid布局。

17.3.1 Vue 中的 Grid 布局 ​

在Vue中，你可以直接在组件的样式中使用Grid布局，也可以使用一些第三方库来简化Grid布局的使用。

基本用法：

vue
<template>
  <div class="grid-container">
    <div class="grid-item" v-for="item in items" :key="item.id">
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, content: '项目1' },
        { id: 2, content: '项目2' },
        { id: 3, content: '项目3' },
        { id: 4, content: '项目4' },
        { id: 5, content: '项目5' },
        { id: 6, content: '项目6' }
      ]
    }
  }
}
</script>

<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}
</style>

使用第三方库：

  • vue-grid-layout：一个可拖拽、可调整大小的Grid布局库
  • gridjs-vue：一个用于创建数据表格的库，基于Grid布局

17.3.2 React 中的 Grid 布局 ​

在React中，你可以使用普通的CSS Grid布局，也可以使用一些专门的React组件库。

基本用法：

jsx
import React from 'react';
import './GridExample.css';

const GridExample = () => {
  const items = [
    { id: 1, content: '项目1' },
    { id: 2, content: '项目2' },
    { id: 3, content: '项目3' },
    { id: 4, content: '项目4' },
    { id: 5, content: '项目5' },
    { id: 6, content: '项目6' }
  ];

  return (
    <div className="grid-container">
      {items.map(item => (
        <div key={item.id} className="grid-item">
          {item.content}
        </div>
      ))}
    </div>
  );
};

export default GridExample;
css
/* GridExample.css */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}

使用第三方库：

  • react-grid-layout：一个可拖拽、可调整大小的Grid布局库
  • @mui/material：Material-UI库中的Grid组件
  • react-bootstrap：Bootstrap的React实现，包含Grid系统

17.3.3 Angular 中的 Grid 布局 ​

在Angular中，你可以使用普通的CSS Grid布局，也可以使用Angular Material中的Grid系统。

基本用法：

html
<!-- grid-example.component.html -->
<div class="grid-container">
  <div class="grid-item" *ngFor="let item of items">
    {{ item.content }}
  </div>
</div>
typescript
// grid-example.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-grid-example',
  templateUrl: './grid-example.component.html',
  styleUrls: ['./grid-example.component.css']
})
export class GridExampleComponent {
  items = [
    { id: 1, content: '项目1' },
    { id: 2, content: '项目2' },
    { id: 3, content: '项目3' },
    { id: 4, content: '项目4' },
    { id: 5, content: '项目5' },
    { id: 6, content: '项目6' }
  ];
}
css
/* grid-example.component.css */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}

使用Angular Material：

html
<!-- 使用Angular Material的Grid系统 -->
<div class="grid-container">
  <div class="grid-item" *ngFor="let item of items">
    {{ item.content }}
  </div>
</div>
scss
/* 使用Angular Material的断点系统 */
.grid-container {
  display: grid;
  gap: 20px;
  padding: 20px;
  
  /* 移动端 */
  grid-template-columns: 1fr;
  
  /* 平板端 */
  @media (min-width: 600px) {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* 桌面端 */
  @media (min-width: 960px) {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* 大屏端 */
  @media (min-width: 1280px) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}

小结 ​

本章介绍了Grid布局的拓展学习方向，包括：

  1. Grid布局高级属性：

    • grid-auto-flow：控制网格项目的自动排列方式
    • grid-auto-rows和grid-auto-columns：设置自动创建的轨道尺寸
    • grid：简写属性，同时设置多个Grid相关属性

  2. 复杂布局实战：

    • 瀑布流布局：使用Grid布局实现错落有致的瀑布流效果
    • Masonry布局：结合JavaScript实现更复杂的瀑布流布局
    • 响应式仪表盘布局：适应不同屏幕尺寸的仪表盘布局
    • 复杂的后台管理系统布局：包含多个区域的复杂布局

  3. 前端框架中的Grid布局应用：

    • Vue中的Grid布局：直接使用CSS Grid或第三方库
    • React中的Grid布局：使用普通CSS或专门的React组件库
    • Angular中的Grid布局：使用普通CSS或Angular Material

通过学习这些拓展内容，你将能够更全面地掌握Grid布局，应对各种复杂的布局场景，提升前端开发能力。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建