Ant Design入门-第三篇：布局组件应用

Ant Design入门-第三篇：布局组件应用

在使用Ant Design构建React应用时，布局组件是搭建页面结构的核心工具。合理运用布局组件，不仅能让页面层次分明、视觉流畅，还能实现良好的响应式效果，适配不同设备的屏幕尺寸。本文将深入介绍Grid栅格布局、Layout布局组件和导航组件（Menu）的应用方法与实践技巧。

一、Grid栅格布局

（一）栅格系统原理与基本使用

Ant Design的Grid栅格系统基于24等分原则，通过Row和Col组件来划分页面行列。Row代表行容器，Col代表列容器，Col组件的span属性用于指定该列占据的栅格数，取值范围为1到24 。例如，将一行平均分为两列，可设置两个Col组件的span均为12；若要创建三列布局，可分别设置span为8、8、8。

import React from'react';
import { Row, Col } from 'antd';

const GridBasic = () => {
  return (
    <Row>
      <Col span={8}>列1</Col>
      <Col span={8}>列2</