Flexbox for aligning items (centering is finally easy!), CSS Grid for magazine-style layouts, and media queries for responsive design.
/* Flexbox - center anything */
.container {
display: flex;
justify-content: center;
align-items: center;
}
/* Grid - fraction units */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
/* Responsive */
@media (max-width: 768px) {
.grid { grid-template-columns: 1fr; }
}Start mobile-first: style for small screens, then add media queries for larger ones.
1fr = one fraction of available space. repeat(4, 1fr) = 4 equal columns.