kb/data/developer.mozilla.org/en-US/docs/Glossary/Grid_Axis-0.md

11 KiB

title chunk source category tags date_saved instance
Grid Axis - Glossary | MDN 1/3 https://developer.mozilla.org/en-US/docs/Glossary/Grid_Axis reference web, html, css, javascript, documentation 2026-05-05T05:32:56.952494+00:00 kb-cron

MDN HTML HTML: Markup language

HTML reference

HTML guides

Markup languages

CSS CSS: Styling language

CSS reference

CSS guides

Layout cookbook

JavaScriptJS JavaScript: Scripting language

JS reference

JS guides

Web APIs Web APIs: Programming interfaces

Web API reference

Web API guides

All All web technology

Technologies

Topics

Learn Learn web development

Frontend developer course

Learn HTML

Learn CSS

Learn JavaScript

Tools Discover our tools

About Get to know MDN better

Blog

  1. Glossary
  2. Grid Axis

Grid Axis

CSS grid layout is a two-dimensional layout method enabling the laying out of content in rows and columns. Therefore in any grid we have two axes. The block or column axis , and the inline or row axis. It is along these axes that items can be aligned and justified using the properties defined in the Box Alignment specification. The inline axis (also called row axis, or main axis) is the direction along which regular text flows. The block axis (also called column axis, or cross axis) is the axis used when laying out blocks of text. The physical direction of these axes can change according to the writing mode of the document. For example, if you are writing left to right, top to bottom (like typical English prose), then the individual characters are placed along the inline axis, which runs from left to right. Diagram showing the inline axis in CSS grid layout. And, if the text contains multiple lines, these lines are placed along the block axis, which runs from top to bottom. Diagram showing the block axis in CSS grid layout.

In this article

See also