Welcome to Part 22 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore CSS Columns & Multi-column Layouts.

While Flexbox and Grid are ideal for structuring card panels and application dashboards, CSS Multi-column Layout is a dedicated module designed to split content blocks into multiple adjacent columns (resembling newspaper layouts). Text flows from the bottom of one column to the top of the next automatically, adjusting container counts dynamically.

---

Chapter 129: Column Count, Widths & Shorthands

To split text elements into multi-column layouts, use columns properties:

⬢ Column Count (column-count)

Specifies the exact number of columns to split content into:

.article-newspaper {
  column-count: 3; /* Splits text into 3 vertical columns */
}

⬢ Column Width (column-width)

Suggests an ideal target width for columns. The browser will dynamically scale the column count up or down depending on viewport width:

.article-fluid {
  column-width: 200px; /* Generates as many 200px columns as fit viewport */
}

⬢ The Columns Shorthand (columns)

/* Syntax: columns: [column-width] [column-count] */
.article-short {
  columns: 250px 3;
}

---

Chapter 130: Columns Spacing & Rule Lines

▪ Column Gap (column-gap)

Defines the horizontal spacing between adjacent columns:

• column-gap: 30px; (Default is usually 1em).

▪ Column Rule (column-rule)

Styles a vertical divider line between columns, behaving like the standard border shorthand:

.article-bordered {
  column-rule: 2px dashed #cbd5e1;
}

---

Chapter 131: Controlling Spans & Breaks

By default, elements inside columns are split across boundaries. You can control these flows:

▲ Column Span (column-span)

Allows elements to span across all column columns (like article header titles):

• none (Default): Element flows inside its column.
• all: Element stretches horizontally across all column tracks.

.article-title {
  column-span: all;
  margin-bottom: 20px;
}

▲ Column Breaks (break-inside)

Prevents block elements (like images or quotes) from splitting awkwardly across columns:

.card-quote {
  break-inside: avoid; /* Keeps the entire quote box together in one column */
}

---

Chapter 132: Columns Practice & Self-Check

⬢ Practice Exercises

1. Exercise 1: Newspaper Article Layout: Create a text layout with a spanned title and double-bordered columns.

   .newspaper-block {
     column-count: 2;
     column-gap: 40px;
     column-rule: 1px solid black;
   }
   .newspaper-headline {
     column-span: all;
     text-align: center;
   }

⬢ Self-Check Questions

1. What layout system is ideal for newspaper-style text flow columns?
   • Answer: CSS Multi-column Layout.
2. Which property specifies the exact count of columns to generate?
   • Answer: column-count.
3. What happens when you use column-width: 250px instead of column-count?
   • Answer: The browser generates columns dynamically based on screen widths, letting them drop to fewer columns on mobile.
4. What shorthand property combines column count and column width?
   • Answer: columns.
5. Does column-gap apply spacing to the outer borders of the container?
   • Answer: No, gaps only space the gutters between adjacent columns.
6. Which property draws a vertical separator line between columns?
   • Answer: column-rule.
7. What value of column-span allows an element to stretch horizontally across all columns?
   • Answer: all.
8. How do you prevent a figure image from breaking across column lines?
   • Answer: Set its break-inside property to avoid.
9. What is the default value of column-gap?
   • Answer: normal (which computes to 1em).
10. Can you use flex properties inside multi-column layouts?
    • Answer: Yes, but it is not recommended as it changes how block-level items fragment across columns.