编辑“︁HTML栅格系统”︁

{{DISPLAYTITLE:HTML栅格系统}}

'''HTML栅格系统'''（Grid System）是响应式网页设计的核心工具之一，通过将页面划分为可灵活调整的列和行，帮助开发者快速创建适应不同屏幕尺寸的布局。本条目将详细介绍栅格系统的原理、实现方式及实际应用。

== 概述 ==
栅格系统基于CSS的{{code|display: grid}}或第三方框架（如Bootstrap的栅格系统）实现，其核心思想包括：
* '''容器（Container）'''：包裹栅格布局的父元素。
* '''行（Row）'''：水平排列的单元。
* '''列（Column）'''：垂直划分的单元，通常以12列或16列为标准。
* '''间距（Gutter）'''：列与列之间的间隙。

数学上，栅格的宽度计算可表示为：
<math>\text{总宽度} = (\text{列数} \times \text{列宽}) + (\text{列数} - 1) \times \text{间距}</math>

== 原生CSS栅格实现 ==
以下是使用CSS Grid的示例：

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 12列等宽 */
  gap: 20px; /* 间距 */
}
.grid-item {
  background: #f0f0f0;
  padding: 15px;
  text-align: center;
}
.col-4 { grid-column: span 4; } /* 占4列 */
.col-6 { grid-column: span 6; }
</style>
</head>
<body>
<div class="grid-container">
  <div class="grid-item col-4">区块1</div>
  <div class="grid-item col-4">区块2</div>
  <div class="grid-item col-4">区块3</div>
  <div class="grid-item col-6">区块4</div>
  <div class="grid-item col-6">区块5</div>
</div>
</body>
</html>
</syntaxhighlight>

'''输出效果'''：
* 区块1-3各占4列（总12列），区块4-5各占6列。
* 响应式调整时，区块会自动换行。

== Bootstrap栅格系统 ==
Bootstrap的栅格系统通过预定义类实现响应式布局：

<syntaxhighlight lang="html">
<div class="container">
  <div class="row">
    <div class="col-md-4">区块A</div> <!-- 中屏幕及以上占4列 -->
    <div class="col-md-4">区块B</div>
    <div class="col-md-4">区块C</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-3">区块D</div> <!-- 小屏幕占6列，中屏幕占3列 -->
    <div class="col-sm-6 col-md-9">区块E</div>
  </div>
</div>
</syntaxhighlight>

== 响应式断点 ==
栅格系统通常定义以下断点（以Bootstrap为例）：
{| class="wikitable"
|+ 常见断点配置
! 断点名称 !! 屏幕宽度 !! 类前缀
|-
| Extra small || <576px || {{code|.col-xs-}}
|-
| Small || ≥576px || {{code|.col-sm-}}
|-
| Medium || ≥768px || {{code|.col-md-}}
|-
| Large || ≥992px || {{code|.col-lg-}}
|-
| Extra large || ≥1200px || {{code|.col-xl-}}
|}

== 实际案例 ==
'''电商网站布局'''：
<mermaid>
graph TD
  A[导航栏] --> B[轮播图 - 全宽]
  B --> C[商品列表]
  C --> D[商品卡片 - 4列桌面/2列平板]
  C --> E[商品卡片 - 4列桌面/2列平板]
  C --> F[商品卡片 - 4列桌面/2列平板]
</mermaid>

实现代码片段：
<syntaxhighlight lang="html">
<div class="container">
  <div class="row">
    <div class="col-xl-3 col-md-6">商品1</div>
    <div class="col-xl-3 col-md-6">商品2</div>
    <div class="col-xl-3 col-md-6">商品3</div>
    <div class="col-xl-3 col-md-6">商品4</div>
  </div>
</div>
</syntaxhighlight>

== 高级技巧 ==
=== 嵌套栅格 ===
栅格内可嵌套子栅格以实现复杂布局：
<syntaxhighlight lang="html">
<div class="grid-container">
  <div class="grid-item col-6">
    <div class="nested-grid"> <!-- 子栅格 -->
      <div class="nested-item">子内容1</div>
      <div class="nested-item">子内容2</div>
    </div>
  </div>
</div>
</syntaxhighlight>

=== 自动填充与拉伸 ===
使用{{code|grid-auto-flow: dense}}可优化空白填充：
<syntaxhighlight lang="css">
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-flow: dense;
}
</syntaxhighlight>

== 参见 ==
* [[HTML响应式设计]]
* [[CSS弹性盒子]]

{{网页设计与开发}}

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML响应式设计]]