Flexbox: The One-Dimensional Master
Flexbox is perfect for arranging items in a single line, either a row or a column. Think of it like organizing books on a shelf. You can control their alignment, spacing, and order with ease.
Key property: display: flex; on the container element.
Interactive Flexbox Demo
Item 1
Item 2
Item 3
.flex-container {
display: flex;
gap: 1rem;
/* Change these properties with the dropdowns! */
justify-content: flex-start;
align-items: stretch;
}Grid: The Two-Dimensional Powerhouse
Grid is designed for arranging items in two dimensions (rows AND columns) simultaneously. It's like a chessboard or a spreadsheet, giving you precise control over the entire page layout.
Key property: display: grid; on the container element.
Grid Demo
1
2
3
4 (Spans 2 columns)
5
.grid-container {
display: grid;
/* This creates responsive columns that are at least 120px wide */
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
}
.grid-item-span {
/* This item will take up two grid columns */
grid-column: span 2;
}