mdn/css/3_css_layout/06_positioning

06_positioning

dz / mdn / css / 3_css_layout / 06_positioning

Summary

multiple column layout

Node Tree

Nodes

multi_column_layout
content multi-column layout
children newspaper_cols, spanning_columns, styling_cols, 3col, cols_frags, multicol (AKA)

3col
content 3-column layout
children column_count_3, column_width_200px
parents multi_column_layout

newspaper_cols
content lays out content in columns, just like a newspaper
parents multi_column_layout

multicol
content multicol
parents multi_column_layout

column_count_3
content column-count: 3
parents 3col

column_width_200px
content column-width: 200px
parents 3col

styling_cols
content styling columns
children not_individually, column_gap, column_rule
parents multi_column_layout

not_individually
content not individually
parents styling_cols

column_gap
content column-gap
parents styling_cols

column_rule
content column-rule
children column_rule_shorthand, lies_across_gap
parents styling_cols

column_rule_shorthand
content shorthand for column-rule -color, -style, -width
parents column_rule

lies_across_gap
content lies across gap defined in column-gap
parents column_rule

spanning_columns
content spanning columns
children column_span_all
parents multi_column_layout

column_span_all
content column-span: all
children none_or_all
parents spanning_columns

none_or_all
content none or all
parents column_span_all

cols_frags
content columns and fragmentation
children content_breaks_fragment_cols
parents multi_column_layout

content_breaks_fragment_cols
content content must break to fragment into columns
children break_inside_avoid
parents cols_frags

break_inside_avoid
content "break-inside: avoid" to prevent breaking
children does_not_frag_across_cols
parents content_breaks_fragment_cols

does_not_frag_across_cols
content does not fragment across columns
parents break_inside_avoid