Portfolio Grid HTML Template 2026

Portfolio Grid Layouts — Four Approaches

The right portfolio grid depends on your content: equal-height cards for consistent screenshots, masonry for photography with varying aspect ratios, a single-column case study list for writing-heavy work, and a full-screen gallery for visual artists. Using the wrong grid for your content type is one of the most common portfolio design mistakes.

CSS Grid

Equal-Height Card Grid

CSS Grid with grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)). All cards equal height with object-fit: cover on images. Best for: UI/UX portfolios, web design work, and any content with consistent aspect ratios.

Masonry

Masonry Layout

CSS columns property or CSS Grid with grid-auto-rows and grid-row: span for varying heights. Best for: photography portfolios, illustration, and content where preserving the original aspect ratio matters more than visual uniformity.

Filter

Category Filter Buttons

Buttons for each project category (Branding, Web, Print, Motion). Click toggles visibility of matching cards. Vanilla JavaScript data attribute filtering — under 15 lines of code, zero dependencies. Category filters help visitors self-select relevant work quickly.

Hover

Hover Overlay Effects

On card hover: a semi-transparent overlay appears with project title, category tag, and "View Project" CTA. Pure CSS — opacity transition on the overlay div. Reveals information on demand without cluttering the grid at rest.

Portfolio Grid — CSS Implementation

Grid Type	CSS Property	Best For
Auto-fill responsive	grid-template-columns: repeat(auto-fill, minmax(280px,1fr))	UI/web portfolios
Fixed 3-column	grid-template-columns: repeat(3,1fr)	Agency portfolios
Masonry (CSS)	columns: 3; column-gap: 16px	Photography
Featured + grid	grid-column: span 2 on first card	Case study highlight

Portfolio Grid — Performance Tips

Use loading="lazy" on all images below the first viewport
Export images as WebP at 800px wide, 80% quality for grid thumbnails
Use aspect-ratio: 16/9 on cards to prevent layout shift before images load
Inline the CSS for above-the-fold grid — eliminates render-blocking
Preload the first 3 visible images with rel="preload" in the head
Use srcset for responsive images — serve 400px on mobile, 800px on desktop

Get All 180+ Templates — $35 One-Time

Commercial licence · No subscription · Instant download · Lifetime updates

Download All 180+ Templates — $35

One payment · Own the files forever · Used by 500+ agencies worldwide

Frequently Asked Questions

How do I build a portfolio grid in HTML and CSS?

Use CSS Grid: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) with gap: 16px. Each grid item contains an img tag with object-fit: cover and a fixed height (200–300px). This creates a responsive equal-height grid that wraps automatically. Add a hover overlay div inside each card with position: absolute and an opacity transition for the hover effect.

How do I add category filtering to a portfolio grid?

Add data-category attributes to each portfolio card (data-category='web'). Create filter buttons with matching data-filter values. On button click, use JavaScript to loop through all cards: show cards whose data-category matches the filter, hide the rest. Add a CSS transition to opacity for a smooth filter effect. Total: 15 lines of vanilla JavaScript, no library needed.

What is the difference between CSS Grid and CSS masonry for portfolios?

CSS Grid with auto-fill creates equal-height rows — best for UI screenshots and web design work where consistent visual weight matters. CSS columns property creates a masonry layout where cards fill vertically, preserving their natural height — best for photography and illustrations with varying aspect ratios. True CSS Grid masonry (grid-template-rows: masonry) has limited browser support in 2026; the CSS columns approach has universal support.

How do I make a portfolio grid load fast?

Use WebP images at 800px wide maximum for grid thumbnails. Add loading='lazy' to all images. Set a fixed aspect-ratio on cards to prevent layout shift. Preload the first 3 visible images. On mobile, serve 400px images via srcset. Hosted on Cloudflare Pages, these optimizations produce portfolio grids that score 95+ on PageSpeed Insights.

How many portfolio HTML templates are in UIXDraft?

UIXDraft includes 180+ general-purpose HTML/CSS business templates — not built specifically for portfolio grid, but plain HTML/CSS you can freely edit and adapt with your own services, pricing and content. One $35 purchase, commercial licence.

HTML Templates for Portfolio Grid Layouts