Fluid Layouts
Use percentage widths and max-width to create layouts that adapt fluidly to any screen width.
CSS
Intermediate
3 min read
Fluid Layouts
Example
.container { width: min(100% - 2rem, 1140px); margin-inline: auto; }
.two-col { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .two-col { grid-template-columns: 2fr 1fr; } }
img { max-width: 100%; height: auto; } Pro Tip
min(100% - 2rem, 1140px) is a modern one-liner for a centered, padded container.