Back to Examples
Blog Layout Example
A common blog layout using flexbox. Features a main content area with articles and a sidebar for categories, recent posts, and other widgets. The layout is fully responsive and adapts to different screen sizes.
PREVIEW
Featured Post Title
Posted on August 24, 2024
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Read More →Search
Categories
CODE
/* Main Layout */
.blog-container {
display: flex;
flex-direction: column;
gap: 2rem;
}
@media (min-width: 1024px) {
.blog-container {
flex-direction: row;
}
}
/* Main Content Area */
.main-content {
flex-grow: 1;
}
/* Sidebar */
.sidebar {
width: 100%;
}
@media (min-width: 1024px) {
.sidebar {
width: 33.333333%;
}
}
/* Post Grid */
.posts-grid {
display: grid;
gap: 1.5rem;
}
@media (min-width: 768px) {
.posts-grid {
grid-template-columns: repeat(2, 1fr);
}
}