Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a responsive portfolio gallery grid with CSS?
If you are a shutterbug and love photography, you would love to display it on a website for sure. For that, grids are created for the gallery that also works on different devices. The responsiveness can also be set easily using CSS Grid or Flexbox.
Syntax
.gallery-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
Method 1: Using CSS Grid
CSS Grid provides an efficient way to create responsive gallery layouts. The auto-fit and minmax() functions automatically adjust the number of columns based on screen size −
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
padding: 20px;
}
.gallery-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.gallery-item {
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
overflow: hidden;
transition: transform 0.3s ease;
}
.gallery-item:hover {
transform: translateY(-5px);
}
.gallery-item img {
width: 100%;
height: 200px;
object-fit: cover;
}
.gallery-content {
padding: 15px;
}
.gallery-content h3 {
margin-bottom: 5px;
color: #333;
}
.gallery-content p {
color: #666;
font-size: 14px;
}
h1 {
text-align: center;
margin-bottom: 30px;
color: #333;
}
</style>
</head>
<body>
<h1>Portfolio Gallery</h1>
<div class="gallery-container">
<div class="gallery-item">
<img src="/docker/images/docker-mini-logo.jpg" alt="Docker Logo">
<div class="gallery-content">
<h3>Docker Project</h3>
<p>Container technology</p>
</div>
</div>
<div class="gallery-item">
<img src="/jira/images/jira-mini-logo.jpg" alt="JIRA Logo">
<div class="gallery-content">
<h3>JIRA Integration</h3>
<p>Project management</p>
</div>
</div>
<div class="gallery-item">
<img src="/kubernetes/images/kubernetes-mini-logo.jpg" alt="Kubernetes Logo">
<div class="gallery-content">
<h3>Kubernetes Setup</h3>
<p>Container orchestration</p>
</div>
</div>
<div class="gallery-item">
<img src="/ansible/images/ansible-mini-logo.jpg" alt="Ansible Logo">
<div class="gallery-content">
<h3>Ansible Automation</h3>
<p>Configuration management</p>
</div>
</div>
</div>
</body>
</html>
A responsive grid layout with 4 portfolio items displayed in cards. On desktop, items appear in a row. On tablets (768px and below), items stack into 2 columns. On mobile (480px and below), items stack vertically in a single column. Each card has hover effects and rounded corners.
Method 2: Using Flexbox
Flexbox provides another approach for creating responsive gallery grids with more control over alignment −
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f2f5;
padding: 20px;
}
.flex-gallery {
display: flex;
flex-wrap: wrap;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.flex-item {
flex: 1 1 calc(25% - 15px);
min-width: 250px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
overflow: hidden;
}
.flex-item img {
width: 100%;
height: 180px;
object-fit: cover;
}
.flex-content {
padding: 20px;
}
.flex-content h3 {
color: #2c3e50;
margin-bottom: 8px;
}
.flex-content p {
color: #7f8c8d;
font-size: 14px;
}
h1 {
text-align: center;
margin-bottom: 40px;
color: #2c3e50;
font-size: 2.5rem;
}
@media (max-width: 768px) {
.flex-item {
flex: 1 1 calc(50% - 10px);
}
}
@media (max-width: 480px) {
.flex-item {
flex: 1 1 100%;
}
}
</style>
</head>
<body>
<h1>Creative Portfolio</h1>
<div class="flex-gallery">
<div class="flex-item">
<img src="/docker/images/docker-mini-logo.jpg" alt="Docker">
<div class="flex-content">
<h3>Docker Solutions</h3>
<p>Containerization platform</p>
</div>
</div>
<div class="flex-item">
<img src="/jira/images/jira-mini-logo.jpg" alt="JIRA">
<div class="flex-content">
<h3>JIRA Workflow</h3>
<p>Issue tracking system</p>
</div>
</div>
<div class="flex-item">
<img src="/kubernetes/images/kubernetes-mini-logo.jpg" alt="Kubernetes">
<div class="flex-content">
<h3>K8s Deployment</h3>
<p>Orchestration tool</p>
</div>
</div>
<div class="flex-item">
<img src="/ansible/images/ansible-mini-logo.jpg" alt="Ansible">
<div class="flex-content">
<h3>Ansible Playbook</h3>
<p>Automation framework</p>
</div>
</div>
</div>
</body>
</html>
A flexible grid layout using Flexbox with responsive behavior. Items automatically wrap to new lines based on screen size. The layout shows 4 columns on desktop, 2 on tablet, and 1 on mobile devices with smooth transitions.
Key Properties
| Property | Purpose |
|---|---|
grid-template-columns |
Defines grid column structure |
repeat(auto-fit, minmax()) |
Creates responsive columns automatically |
flex-wrap |
Allows items to wrap to new lines |
object-fit: cover |
Ensures images maintain aspect ratio |
Conclusion
CSS Grid provides the most straightforward approach for responsive galleries with automatic column adjustment. Flexbox offers more control over individual item sizing and alignment. Both methods ensure your portfolio gallery looks great across all devices.
Updated on: 2026-03-15T14:29:26+05:30
658 Views
Advertisements