CSS Grid is designed for two-dimensional layouts, allowing you to control both rows and columns simultaneously. It's perfect for complex layouts and overall page structure.
CSS Grid: Two-Dimensional Layouts
CSS Grid is designed for two-dimensional layouts, allowing you to control both rows and columns simultaneously. It's perfect for complex layouts and overall page structure.
css
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
gap: 20px;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }Flexbox: One-Dimensional Layouts
Flexbox is designed for one-dimensional layouts, either in a row or column. It's excellent for component-level layouts and distributing space among items.
css
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.flex-item {
flex: 1;
}
.flex-item:first-child {
flex: 2; /* Takes twice the space */
}
/* Responsive flex layout */
@media (max-width: 768px) {
.flex-container {
flex-direction: column;
}
}