TheCSS box alignment module details how alignment works in various layout methods; in this guide, we explore how box alignment works in the context ofmulti-column layout. As this guide aims to detail things that are specific to both modules, it should be read in conjunction with thebox alignment overview guide, which details the common features of box alignment across layout methods.

Inmulti-column layout, thealignment container is the content box of the multicol container. Thealignment subject is the column box. The properties which apply to multi-column layouts are detailed below.

align-content and justify-content

Thealign-content property applies to the block axis andjustify-content to the inline axis. Any spacing added to the columns due to use of space distribution will be added to the gap between the columns, therefore making the gap larger than might be specified by thecolumn-gap (orgap shorthand) property.

Using a value ofjustify-content other thannormal orstretch will cause column boxes to display at thecolumn-width specified on the multicol container, and the remaining space distributed according to the value ofjustify-content.

column-gap

Thecolumn-gap property was originally specified in the multiple-column layout specification and then later unified with the gap properties for other layout methods in box alignment. While other layout methods treat the initial value ofcolumn-gap as0, multi-column layout treats it as1em — you generally want a gap between columns.

See also

• CSS box alignment module
• Box alignment overview
• Box alignment in flexbox
• Box alignment in grid layout
• Box alignment for block, absolutely positioned, and table layouts