1. Featured Article (Spans 2 Columns)
The first article spans 2 columns, making it stand out as the featured
story.
📰
BREAKING NEWS
The Future of Web Design: CSS Grid Changes Everything
CSS Grid has revolutionized how we approach layouts. Learn how
this powerful tool is changing the way developers build
websites...
💻
TECHNOLOGY
New Framework Release
The latest version brings significant performance
improvements...
🎨
DESIGN
Color Trends 2025
Discover the hottest color palettes for modern websites...
.magazine {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.featured {
grid-column: span 2; /* Takes 2 columns */
}
2. Complex Magazine Layout
Articles span different numbers of rows and columns, creating a
dynamic waterfall layout.
🏆
FEATURE
Best of the Year Awards
Celebrating excellence in web development and design.
🎬
INTERVIEW
Inside the Mind of a Developer
An in-depth conversation about the future of coding.
📈
SPECIAL REPORT
The State of the Industry: A Comprehensive Analysis
Our annual report on where the tech industry is headed.
📧
NEWSLETTER
Subscribe to our weekly digest
Get the best stories delivered to your inbox.
/* Spanning properties */
.span-2cols { grid-column: span 2; } /* Takes 2 columns */
.span-2rows { grid-row: span 2; } /* Takes 2 rows */
.span-3cols { grid-column: span 3; } /* Takes 3 columns */
.span-all { grid-column: 1 / -1; } /* Takes ALL columns */
3. Newspaper Layout (Grid + Flexbox)
A traditional newspaper style with headline sections and side stories.
Grid and Flexbox: Better Together
The ultimate guide to modern CSS layouts. Learn when to use Grid
and when to reach for Flexbox.
01
Grid for Page Layout
Header, sidebar, main, footer
02
Flexbox for Components
Navbars, cards, buttons
03
Combine Both
Best of both worlds
04
Responsive Design
Media queries that work
05
Modern Best Practices
What's new in 2025
.newspaper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.headline {
grid-column: span 2; /* Feature story takes
half the page */
}
.story-list {
display: flex;
flex-direction: column; /* Vertical stack
*/
gap: 15px;
}
4. Pinterest-Style Masonry
Mixed heights create a waterfall effect. Tall pins span 2 rows.
🏔️
Mountain Adventure
Hiking tips and gear reviews
📖
Ultimate Reading List
Top 20 books every developer should read
🎨
Design Inspiration
Beautiful UI examples
💻
Coding Tutorials
Learn new skills today
🎬
Movie Reviews
What to watch this weekend
🍳
Recipes
Quick and easy meals
.masonry {
display: grid;
grid-template-columns: repeat(auto-fit,
minmax(250px, 1fr));
gap: 20px;
}
.pin-tall {
grid-row: span 2; /* Makes it taller */
}
📚 Spanning Cheat Sheet
/* =================================== SPANNING COLUMNS
=================================== */ grid-column: span 2; /* Spans 2
columns */
grid-column: span 3; /* Spans 3 columns */
grid-column: 1 / 3; /* Starts at line 1, ends at line 3 */
grid-column: 1 / -1; /* Spans ALL columns */
/* =================================== SPANNING ROWS
=================================== */ grid-row: span 2; /* Spans 2
rows */
grid-row: span 3; /* Spans 3 rows */
grid-row: 1 / 4; /* Starts at line 1, ends at line 4 */
/* =================================== SPANNING BOTH
=================================== */ big-article {
grid-column: span 2;
grid-row: span 2;
}
/* =================================== VISUAL DIAGRAM
=================================== */ /* grid-column: span 2 means
the item takes 2 spaces horizontally */
/* ┌─────┬─────┬─────┐ */
/* │ │ │ │ */
/* │ 2 cols wide │ */
/* │ │ │ │ */
/* └─────┴─────┴─────┘ */
💡 grid-column: 1 / -1 is a powerful pattern — it
spans from the first column line to the last column line (all
columns).
🧠 Quick Quiz
/* Question 1: What does grid-column: span 2 do? */ /* Answer: Makes
an element span across 2 columns */ /* Question 2: What does
grid-column: 1 / -1 do? */ /* Answer: Spans from the first column line
to the last (all columns) */ /* Question 3: How do you make an article
taller so it spans 2 rows? */ /* Answer: grid-row: span 2 */ /*
Question 4: Can you combine grid-column and grid-row spanning? */ /*
Answer: Yes! The featured article in demo 2 does both */