Learning how to build a tiled layout with CSS is one of the most powerful and frequently used layout skills in modern web design — tiled layouts (also called card grids) are perfect for showcasing projects, portfolios, products, blog posts, team members, testimonials, or any content that benefits from visual repetition and responsiveness. In this hands-on guide, you’ll recreate the demonstration website’s “Projects” section: a clean, responsive tiled grid of 8 project cards (4 per row on desktop, stacking on mobile), using background images, text overlays, hover color changes, and modern CSS techniques.

This is Section 3 of our full HTML CSS website project series — building directly on your css-practice folder, you’ll create a professional, reusable project showcase that looks great on every device.

Prerequisites

  • Your css-practice project folder from previous lessons (with header & About Me already added)
    • index.html
    • css/styles.css
    • images/ folder
  • Two small project preview images (recommended 400–600px):
    • Save them as project-left.jpeg and project-right.jpeg in images/
  • Visual Studio Code with Live Server extension (highly recommended)
  • Modern browser (Chrome/Edge/Firefox)

1. Add Projects Section HTML Structure

Open index.html and add the following code after your closing </section> or </div> from the About Me section:

				
					<!-- Section 3: Projects -->
<section class="projects-section">
    <h2 class="section-heading">Projects</h2>

    <div class="projects-grid">
        <div class="project-card project-1"></div>

        <div class="project-card project-2">
            <h3 class="project-text">WEB<br>DESIGN</h3>
        </div>

        <div class="project-card project-3">
            <h3 class="project-text">CHAT<br>BOTS</h3>
        </div>

        <div class="project-card project-4">
            <h3 class="project-text">GAME<br>DESIGN</h3>
        </div>

        <div class="project-card project-5">
            <h3 class="project-text">TEXT<br>ANALYSIS</h3>
        </div>

        <div class="project-card project-6">
            <h3 class="project-text">JAVA<br>SCRIPT</h3>
        </div>

        <div class="project-card project-7">
            <h3 class="project-text">DATA<br>PRIVACY</h3>
        </div>

        <div class="project-card project-8"></div>
    </div>
</section>

Notes for beginners:

  • <section> — semantic wrapper for the projects area
  • .section-heading — reuses style from earlier tutorial
  • .projects-grid — parent container for the tiled layout
  • .project-card — base class for every card
  • .project-1 to .project-8 — unique modifiers for background/color
  • .project-text — centers and styles text overlay

Personalise: replace project names with your real work (e.g., “E-commerce Site”, “Task Manager App”).

2. Style Tiled Layout with CSS – Grid & Cards

Open css/styles.css and add these rules below your existing About Me styles:

				
					/* === Projects Section === */
.projects-section {
  padding: 80px 20px;
  background-color: #f8f9fa;
}

.section-heading {
  text-align: center;
  color: #102c4e;
  margin: 0 0 70px;
  font-size: 2.8rem;
}

/* Tiled grid container */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Individual project card */
.project-card {
  height: 250px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.project-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

/* Text overlay on cards */
.project-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  z-index: 2;
  padding: 20px;
}

/* Individual card backgrounds */
.project-1 {
  background: url('../images/project-left.jpeg') center/cover no-repeat;
}

.project-2 { background-color: white; }
.project-3 { background-color: #209bff; }
.project-4 { background-color: #112d4e; }
.project-5 { background-color: #f9f7f7; }
.project-6 { background-color: #209bff; }
.project-7 { background-color: transparent; }
.project-8 {
  background: url('../images/project-right.jpeg') center/cover no-repeat;
}

Save and refresh — you should now see:

  • Centered “Projects” heading
  • Responsive 4-column grid on desktop (auto-adjusts to 2 or 1 column on smaller screens)
  • 8 cards with different backgrounds
  • Text centered over each card
  • Smooth hover lift + stronger shadow

3. Why This Tiled Layout Works So Well

  • Responsive grid — repeat(auto-fit, minmax(250px, 1fr)) automatically adjusts columns
  • Visual interest — alternating colors + images keep it engaging
  • Hover feedback — subtle lift effect improves interactivity
  • Scalable — add/remove cards easily — grid handles the rest

4. Best Practices & Modern Tips (2025–2026)

  • Use CSS Grid for tiled layouts — far superior to old float
  • Set minmax(250px, 1fr) — cards never get too small
  • Add aspect-ratio: 1 / 1 for perfect square cards if desired
  • Use background: linear-gradient(…) for gradient cards
  • Add transition on hover for smooth animations
  • Ensure text contrast passes WCAG (use shadows or overlays on dark backgrounds)

How to Build Tiled Layout with CSS – FAQ (2025–2026)

  1. How do I build tiled layout with CSS?
    Use CSS Grid: display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px;
  2. How do I make project cards responsive with CSS?
    auto-fit + minmax() automatically handles column count on different screen sizes.
  3. How do I add hover effects in tiled layout with CSS?
    .project-card:hover { transform: translateY(-12px); box-shadow: … }
  4. How do I center text over background images in tiled layout with CSS?
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  5. What’s better than float for tiled layout with CSS?
    CSS Grid — modern, flexible, no clearing needed.

Summary

You now know exactly how to build tiled layout with CSS: responsive CSS Grid, project cards, background images, text overlays, hover effects, and clean, reusable styling.

Mastering how to build tiled layout with CSS unlocks powerful content showcases — perfect for portfolios, galleries, product grids, team pages, and more.

Keep your css-practice folder open — in the next tutorials you’ll build the Experience section, Education & Skills, Featured Quote, and sticky footer — completing your HTML CSS website project.

Contact Us