---
title: Grid Axis
slug: Glossary/Grid_Axis
tags:
  - CSS
  - CSS Grids
translation_of: Glossary/Grid_Axis
---
<p>Grid布局是一种二维布局方法，能够在行和列中布置内容。因此在任何网格中都有两个轴，横轴（即行轴，内联）和纵轴（即列轴，块）。</p>

<p>沿着这些轴，可以使用<a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">盒模型对齐规范</a>中定义的属性对项目进行行对齐和列对齐。</p>

<p>在CSS中，纵轴是放置文本时用的轴。如果你有两个段落，它们从右到左，从上到下书写。在纵轴上，它们一个被放置在另一个下面。</p>

<p><img alt="Diagram showing the block axis in CSS Grid Layout." src="https://mdn.mozillademos.org/files/14775/7_Block_Axis.png" style="height: 306px; width: 940px;"></p>

<p>横轴与纵轴交叉，方向是沿着常规文本流动的。这是我们在Grid布局中的行。</p>

<p><img alt="Diagram showing the inline axis in CSS Grid Layout." src="https://mdn.mozillademos.org/files/14773/7_Inline_Axis.png" style="height: 306px; width: 940px;"></p>

<p>这些轴的物理方向可以根据文档的<a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">写入模式</a>而改变。</p>

<h2 id="了解更多">了解更多</h2>

<h3 id="扩展阅读">扩展阅读</h3>

<ul>
 <li>CSS Grid Layout Guide: <em><a href="/zh_CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Grid布局的基本概念</a></em></li>
 <li>CSS Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in Grid Layout</a></em></li>
 <li>CSS Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></em></li>
</ul>