CrossAxisSpacing

CrossAxisSpacing is a layout property used in two-dimensional grid-like layouts to define the space between items along the cross axis. The cross axis is perpendicular to the grid’s main scrolling direction. In typical vertical grids, the cross axis runs horizontally, so crossAxisSpacing determines the horizontal gap between adjacent columns; in grids that scroll horizontally, it controls the vertical gap between rows.

In Flutter and similar UI frameworks, crossAxisSpacing is exposed as part of grid delegates such as SliverGridDelegateWithFixedCrossAxisCount or SliverGridDelegateWithMaxCrossAxisExtent. It interacts with whether the grid uses a fixed number of columns or a maximum cross-axis extent. Increasing crossAxisSpacing increases the horizontal space between columns and reduces the width available to each grid item when the number of columns is fixed.

CrossAxisSpacing is typically paired with mainAxisSpacing, which controls the gap along the main axis (between rows in a vertically scrolling grid). Together, they determine the overall density and rhythm of the grid.

Example: a grid with three columns, crossAxisSpacing of 8.0, and mainAxisSpacing of 12.0 will feature 8-point horizontal gaps between columns and 12-point vertical gaps between rows.

Related concepts include CSS grid column-gap or grid-gap, which serve a similar role in web layout. Outer margins are usually controlled by padding or container constraints rather than crossAxisSpacing itself.