CSS Free Section Starter Challenge 30 min

3. Modern Responsive CSS Grid Layouts

Overview: Create responsive multi-column grids using `repeat(auto-fit, minmax(280px, 1fr))`.

Concept & Syntax Guide

CSS Grid powers two-dimensional layouts. With `grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));`, items wrap automatically onto new rows on mobile without requiring any media queries!

Hands-On Practice Exercise

Create an Auto-Fit Template Grid

In `.product-grid`, set `display: grid;`, `grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));`, and `gap: 20px;`.

Target Output: FitPulse Gym

Need a hint? Click here to reveal

Hint: Check syntax carefully and make sure your code contains: FitPulse Gym

CSS Code Editor

1
2
3
4
5
6
7
8
9
10

<style>
.product-grid {
  /* Apply CSS Grid rules here */
  
}
.card { background: #f1f5f9; padding: 20px; border-radius: 8px; text-align: center; }
</style>
<div class="product-grid">
  <div class="card">FitPulse Gym</div>
  <div class="card">EduNova Tech</div>
  <div class="card">Solaris Clean</div>
</div>