• Hajipur, Bihar, 844101

☰
❮
❯

CSS

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)

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>.

CSS Multiple Columns Quiz

Q1: Which property sets the number of columns?

A. columns: auto;
B. column-count
C. column-rule
D. column-gap

Q2: What does column-gap define?

A. Number of columns
B. Space between columns
C. Width of each column
D. Height of content

Q3: What is column-rule used for?

A. To break content
B. To add a line between columns
C. To set width
D. To define text alignment

Q4: How do you make a heading span across all columns?

A. column-span: all;
B. display: block;
C. width: 100%;
D. grid-column: span all;

Q5: What is the default value of column-gap?

A. 0
B. normal (~1em or 16px)
C. 20px
D. auto

Q6: Which property sets the minimum width of columns?

A. column-width
B. column-min
C. min-width
D. column-count

Q7: Can you use media queries with columns?

A. No
B. Yes, to change column-count or layout
C. Only with flex
D. Only with Grid

Q8: Which HTML element supports column layout?

A. Any block-level element (like <div>)
B. Only <p>
C. Only <ul>
D. Only <section>

Q9: How to balance content equally in columns?

A. text-align: justify;
B. column-fill: balance;
C. column-weight: equal;
D. display: block;

Q10: What happens if content doesn’t fit all columns?

A. It disappears
B. It overflows to next column/page
C. It wraps
D. It breaks layout
← Previous Next →
Login
Go Back Top