Building the Portfolio with HTML and CSSLesson 2.2

How to build a projects section with CSS Grid

CSS Grid, grid-template-columns, auto-fill, minmax, project card structure, responsive layout, image aspect ratio, card hover state

Project Cards With CSS Grid

The projects section is the most important part of your portfolio. It needs to be scannable, consistent, and responsive without media query overrides.

Card HTML Structure

<section id="projects">
  <h2>Projects</h2>
  <div class="projects-grid">
    <article class="project-card">
      <img src="assets/images/project1.png" alt="Project One screenshot" />
      <h3>Project Name</h3>
      <p>One sentence describing the problem this solves.</p>
      <div class="card-links">
        <a href="#">Live Demo</a>
        <a href="#">GitHub</a>
      </div>
    </article>
  </div>
</section>

Responsive Grid Without Media Queries

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.project-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.project-card:hover {
  transform: translateY(-4px);
}

.project-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

The repeat(auto-fill, minmax(280px, 1fr)) pattern creates as many columns as fit at 280px minimum. On mobile it collapses to a single column automatically. aspect-ratio: 16/9 on the image prevents layout shifts when images load.