Module 25 : CSS Columns & Multi-Column Layouts for creating newspaper-style layouts. This module will cover:
Introduction to Multi-Column Layouts
CSS Properties for Multi-Column Layouts
Creating a Basic Multi-Column Layout
Advanced Multi-Column Techniques
Handling Multi-Column Layout Responsively
Practical Exercises & Lab Experiment
1. Introduction to Multi-Column Layouts
In web design, multi-column layouts are used to create newspaper-style layouts where text flows from one column to another. CSS provides built-in properties to handle this efficiently without using float or flexbox.
Why Use Multi-Column Layouts?
Enhances readability for long-form content.
Creates an aesthetically pleasing, structured layout.
Improves accessibility and UX by dividing content into digestible parts.
Reduces the need for complex float or grid structures.
2. CSS Properties for Multi-Column Layouts
Main Multi-Column Properties
Property Description
column-count Defines the number of columns.
column-width Defines the ideal width of columns.
column-gap Sets space between columns.
column-rule Adds a vertical line between columns.
column-span Makes an element span across multiple columns.
break-inside Prevents elements from breaking between columns.
3. Creating a Basic Multi-Column Layout
Example 1: Simple Multi-Column Text Layout
.newspaper {
column-count: 3;
column-gap: 20px;
column-rule: 2px solid #ccc;
}
<div class="newspaper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id velit id lorem ultrices sodales.</p>
<p>Aliquam erat volutpat. Integer euismod risus nec libero tristique, nec sollicitudin urna posuere.</p>
</div>
Explanation:
column-count: 3; → Creates 3 columns.
column-gap: 20px; → Sets space between columns.
column-rule: 2px solid #ccc; → Adds a vertical divider.
4. Advanced Multi-Column Techniques
Example 2: Controlling Column Width Dynamically
Instead of setting column-count, we can define column-width:
.newspaper {
column-width: 200px;
column-gap: 15px;
}
The browser will automatically decide how many columns fit in the space.
This ensures responsiveness across screen sizes.
Example 3: Preventing Breaks Inside Elements
.no-break {
break-inside: avoid;
}
<div class="newspaper">
<div class="no-break">
<h2>Heading</h2>
<p>This content won't break across columns.</p>
</div>
</div>
break-inside: avoid; prevents content from splitting across two columns.
5. Handling Multi-Column Layout Responsively
Media Query Example:
@media (max-width: 768px) {
.newspaper {
column-count: 2;
}
}
@media (max-width: 480px) {
.newspaper {
column-count: 1;
}
}
Adjusts column-count based on screen width.
Ensures a good reading experience on mobile devices.
6. Practical Exercises & Lab Experiment
Exercise 1: Create a Three-Column Blog Layout
Task: Create a blog layout with three columns and a title that spans all columns.
Steps:
Create an HTML <div> for content.
Use column-count: 3; to create columns.
Apply column-span: all; to make the title span all columns.
.blog-title {
column-span: all;
font-size: 24px;
font-weight: bold;
text-align: center;
}
.blog-content {
column-count: 3;
column-gap: 30px;
column-rule: 1px solid gray;
}
<div class="blog-content">
<h1 class="blog-title">Multi-Column Blog Layout</h1>
<p>Paragraph 1 - Lorem ipsum dolor sit amet...</p>
<p>Paragraph 2 - Curabitur malesuada vehicula...</p>
<p>Paragraph 3 - Nulla facilisi...</p>
</div>
Exercise 2: Create a Responsive Magazine Layout
Task: Design a magazine-style layout that switches between 3, 2, and 1 columns based on screen width.
.magazine {
column-width: 250px;
column-gap: 25px;
}
@media (max-width: 1024px) {
.magazine {
column-count: 2;
}
}
@media (max-width: 600px) {
.magazine {
column-count: 1;
}
}
<div class="magazine">
<p>News article text goes here...</p>
<p>More content about the news...</p>
<p>Additional details...</p>
</div>
Experiment: Implementing Multi-Column Layout in a Real Project
Objective: Create a full-page layout that mimics a real newspaper using multi-columns and images.
Steps:
Create an HTML structure with multiple sections for headlines, images, and text.
Use CSS columns to divide the content into a 3-column layout.
Apply column-span to make the title and images span across all columns.
Implement responsive design to adjust columns based on screen width.
.news-header {
column-span: all;
text-align: center;
font-size: 30px;
font-weight: bold;
}
.news-content {
column-count: 3;
column-gap: 20px;
column-rule: 1px solid lightgray;
}
.news-img {
width: 100%;
display: block;
margin: 10px 0;
}
<div class="news-content">
<h1 class="news-header">Today's Headlines</h1>
<img src="news-image.jpg" alt="News" class="news-img">
<p>Breaking news content goes here...</p>
<p>Additional details about the news...</p>
</div>
Expected Outcome:
Text flows naturally across multiple columns.
The headline spans all columns.
The image is displayed at full width across the columns.
The layout is responsive for different screen sizes.
Conclusion
CSS Multi-Column Layouts offer an easy way to create newspaper-style layouts.
Using properties like column-count, column-width, column-gap, and column-span, you can design flexible and responsive layouts.
Combining media queries with columns ensures adaptability across devices.
No comments:
Post a Comment