CSS gap, column-rule, and row-rule: Keep Spacing Separate from Decoration
CSS gap, column-rule, and row-rule: Keep Spacing Separate from Decoration
When building a card list or an editorial layout, it is common to want both empty space between items and a visible line through that space. gap, column-gap, row-gap, column-rule, and row-rule have similar names, but they do not solve the same problem. Establish the layout gutter first, then add a line only as optional decoration. That order produces more predictable results when the viewport becomes narrow.
gap is a shorthand for gutters between rows and columns in grid, flex, and multi-column layouts. One value applies to both axes; with two values, the first is the row gap and the second is the column gap. A card grid with gap: 24px, for example, can keep sibling spacing consistent without adjusting the outer margin of every card. Use container padding for the space at the edge, and use a card’s own padding for space inside it. Each value then has a clear job.
Flex layouts deserve an extra check when two values are used. In the default horizontal flex-direction: row, the first value controls the distance between flex lines and the second controls the distance between items on a line. That relationship changes when the main axis becomes vertical. Do not paste gap: 16px 24px without considering direction and wrapping. For a one-dimensional list, a single value communicates intent well; in more complex cases, writing row-gap and column-gap separately can be clearer.
Using margin for every internal distance creates exceptions for the first and last item, nested components, and wrapping. gap is not a replacement for all whitespace, though. The distance from an element to its container boundary and the separation between independent layout blocks still belong to padding or margin. Also, alignment properties can distribute free space, so the perceived distance may be larger than the declared gap. Review alignment and container size alongside the number in the stylesheet.
column-rule originated as a way to draw a line between columns of flowing multi-column content. It sets the width, style, and color of that line, which is painted in the center of the empty column gap. It does not change the size of the gap. It fits a newspaper-like article that flows continuously from one column to the next. A grid or flex layout is often a better fit for cards that need independent placement, because individual multi-column boxes are not freely targetable.
Modern CSS also describes decorative rules for grid and flex gutters. row-rule and the common rule shorthand express the idea of a line between rows, or between both rows and columns. Support for this family of gap-decoration features is uneven across browsers, and some parts are experimental. Do not make a core information boundary or a clickable affordance depend on such a line. If a separator must be visible to every user, check current browser support and use a progressive-enhancement design with a supporting element or a border fallback where appropriate.
In practice, start from the small-screen reading experience. Check that generous gaps do not make a one-column card too narrow, that keyboard focus and touch targets do not collide with separators, and that a high-contrast mode does not erase the distinction. A line should be a supporting visual signal, never the sole carrier of meaning. When media or container queries change the column count and spacing, shared tokens help prevent multiple components from overriding the same rule in incompatible ways.
The working rule is simple. Use gap for distance within a layout, padding for a container’s edge, and margin where separate elements need an outer relationship. Use column-rule for its established multi-column purpose. Apply row-rule or rule selectively only after checking support. When reading order and responsive structure come before decorative lines, the design remains easier to maintain with fewer exceptions.