• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS Multiple Columns

← Previous Next →

🔹 What are CSS Multiple Columns?

CSS Multiple Columns allow you to divide content (mostly text) into multiple vertical columns, similar to what you see in newspapers or magazines. This improves readability for long texts and helps utilize screen space efficiently.

It is achieved using the Multi-column Layout Module in CSS.

🔸 Basic Properties for Multiple Columns

Property Description
column-count Specifies the number of columns
column-width Specifies the width of each column
column-gap Space between columns
column-rule Adds a line between columns
column-span Makes an element span across all columns (like a heading)

🔸 Basic Example

<div class="multicolumn">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel arcu a nisl aliquet suscipit.</p>
</div>

.multicolumn {
  column-count: 3;
  column-gap: 20px;
}

🔸 Example with Column Rule

.multicolumn {
  column-count: 2;
  column-gap: 30px;
  column-rule: 1px solid #ccc;
}

🔸 Spanning Columns (For Headings)

.heading {
  column-span: all;
  font-weight: bold;
  font-size: 20px;
}

<div class="multicolumn">
  <h2 class="heading">Chapter 1</h2>
  <p>Content split into columns...</p>
</div>

🔸 Responsive Column Example

@media (max-width: 600px) {
  .multicolumn {
    column-count: 1;
  }
}

Practice Questions

✅ Write CSS for the following:

Q1. Divide a paragraph into 3 columns using column-count.

Q2. Create a 2-column layout with 40px gap between them.

Q3. Add a vertical line between columns using column-rule.

Q4. Span a heading across all columns.

Q5. Create a responsive layout that shows 1 column on mobile.

Q6. Use column-width to control individual column size.

Q7. Style columns with different background colors (with nested divs).

Q8. Align text properly in multi-column layout.

Q9. Add column-fill: balance; to balance content.

Q10. Create multi-column layout inside a <section>.

← Previous Next →

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top