Loading...
Loading...
Make pages look great on any device with media queries
/* Desktop first approach */
.grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.grid { grid-template-columns: 1fr; }
}img { max-width: 100%; height: auto; } /* Never overflows its container */grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));Create a 3-column grid that becomes 2-columns at 768px and 1-column at 480px.
<!DOCTYPE html>
<html><head>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<style>
* { box-sizing: border-box; }
body { font-family: Arial; margin: 20px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { border: 1px solid #ddd; border-radius: 8px; padding: 16px; }
@media (max-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .grid { grid-template-columns: 1fr; } }
</style>
</head><body>
<h1>Responsive Grid</h1>
<div class='grid'>
<div class='card'><h3>Card 1</h3><p>Resize the browser to see change.</p></div>
<div class='card'><h3>Card 2</h3><p>Desktop: 3 columns. Tablet: 2. Phone: 1.</p></div>
<div class='card'><h3>Card 3</h3><p>Responsive design in action.</p></div>
</div>
</body></html>