网格中的间距、分布与对齐

Once your grid columns and rows are defined, the next step is controlling the space between cells. Tailwind's gap-* utilities map directly to the CSS gap shorthand, which sets both row and column gutters simultaneously. A single gap-4 (16px) class gives consistent spacing in all directions, keeping your layout balanced without any custom CSS.

When you need different spacing between columns versus between rows, use gap-x-* for horizontal gutters and gap-y-* for vertical gutters. For example, gap-x-8 gap-y-4 gives wide horizontal space between columns and tighter vertical space between rows. This lets you fine-tune the visual rhythm of your grid independently in each direction.

justify-items-* controls how items are aligned horizontally within their grid cell. The four values are justify-items-start, justify-items-center, justify-items-end, and justify-items-stretch (the default). When items are stretched, they fill the full width of their cell. Centering is common for icon-based grids where you want each icon centered in its column.

align-items-* in a grid context controls how items align vertically within their row track. items-start anchors items to the top of the row, items-center vertically centers them, and items-end pushes them to the bottom. The default is items-stretch, making items fill their row height. This is different from Flexbox's align-items but uses the same class names in Tailwind.

The place-items-* utility is a shorthand that sets both align-items and justify-items simultaneously. place-items-center perfectly centers each grid item both horizontally and vertically within its cell — a two-liner that previously required two separate CSS properties. This is ideal for icon grids, avatar displays, and any grid where items need to float in the middle of their cells.

When the total width of your grid columns is less than the container width, justify-content-* positions the entire grid block horizontally within the container. justify-center centers the column group, justify-between spreads columns to the edges, and justify-around adds even space around each column. This is distinct from justify-items, which aligns items within cells.

align-content-* controls how the entire set of grid rows is positioned vertically when total row height is less than the container. content-center vertically centers all rows, content-between spreads them to the top and bottom, and content-evenly distributes them with equal space. This is particularly useful in fixed-height containers like a dashboard widget.

place-content-* is the shorthand that combines align-content and justify-content in one utility. place-content-center centers the entire grid in its container both horizontally and vertically. This is useful for centered full-screen grids, loading screens, or any time you want the grid block itself to sit in the middle of a larger area.

Sometimes you need one specific item to behave differently from the rest of the grid. justify-self-* overrides justify-items for a single cell, and align-self-* overrides align-items. For instance, you might use justify-self-end to push a single action button to the right inside its cell while all other cells remain left-aligned.

place-self-* is the per-item shorthand combining align-self and justify-self. The most powerful value is place-self-center, which centers an individual item both horizontally and vertically within its cell, regardless of what the parent grid specifies. This is handy for centering an icon or spinner inside a fixed-size grid cell.

Here is a quick mental model for grid alignment in Tailwind: justify-items / align-items — align children within cells (item level). justify-content / align-content — position the whole grid block within the container (track level). justify-self / align-self — override alignment for a single item. Pair these with the shorthand place-* variants to handle both axes at once.

In this lesson you learned: gap-x-* and gap-y-* control horizontal and vertical gutters independently, justify-items and align-items position content within each grid cell, and justify-content and align-content position the entire grid within its container. Next up we move to sizing utilities that control element widths and heights.