Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a responsive portfolio gallery grid with CSS?
If you are a shutterbug and loves 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. Let us see how to create a responsive portfolio gallery grid.
Set the main content
Under the <main> content, set the parent div. Within that, place the divs for image and then the content. Here, we have only shown a single div for our portfolio gallery −
<div class="ImageCol">
<div class="portfolioContent">
<img src="https://www.tutorialspoint.com/docker/images/docker-mini-logo.jpg" />
<h3>Picture 1</h3>
<p>Docker</p>
</div>
</div>
The following is for the four images we have set for the gallery −
<div class="portfolioContainer">
<div class="ImageCol">
<div class="portfolioContent">
<img src="https://www.tutorialspoint.com/docker/images/docker-mini-logo.jpg" />
<h3>Picture 1</h3>
<p>Docker</p>
</div>
</div>
<div class="ImageCol">
<div class="portfolioContent">
<img src="https://www.tutorialspoint.com/jira/images/jira-mini-logo.jpg" />
<h3>Picture 2</h3>
<p>JIRA</p>
</div>
</div>
<div class="ImageCol">
<div class="portfolioContent">
<img src="https://www.tutorialspoint.com/kubernetes/images/kubernetes-mini-logo.jpg" />
<h3>Picture 3</h3>
<p>Kubernates</p>
</div>
</div>
<div class="ImageCol">
<div class="portfolioContent">
<img src="https://www.tutorialspoint.com/ansible/images/ansible-mini-logo.jpg" />
<h3>Picture 4</h3>
<p>Ansible</p>
</div>
</div>
</div>
Style the main content
For the main content, set the maximum width using the max-width property −
main {
max-width: 1000px;
margin: auto;
}
Position the image
The div for the image is positioned on the left using the float property −
.ImageCol {
float: left;
width: 25%;
}
img {
width: 100%;
}
Set the responsiveness
Media Queries are used to set the responsiveness. The width is set to 50% when the screen size is less than 900px −
@media screen and (max-width: 900px) {
.ImageCol {
width: 50%;
}
}
The width is set to 100% when the screen size is less than 600px −
@media screen and (max-width: 600px) {
.ImageCol {
width: 100%;
}
}
Example
The following is the code to create a responsive portfolio gallery grid with CSS −
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
h1 {
font-size: 50px;
text-align: center;
font-family: monospace, serif, sans-serif;
}
body {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial;
}
main {
max-width: 1000px;
margin: auto;
}
img {
width: 100%;
}
.portfolioContainer {
margin: 8px -16px;
}
.portfolioContainer,
.portfolioContainer > .ImageCol {
padding: 8px;
}
.ImageCol {
float: left;
width: 25%;
}
.portfolioContainer:after {
content: "";
display: table;
clear: both;
}
.portfolioContent {
background-color: white;
padding: 10px;
}
@media screen and (max-width: 900px) {
.ImageCol {
width: 50%;
}
}
@media screen and (max-width: 600px) {
.ImageCol {
width: 100%;
}
}
</style>
</head>
<body>
<main>
<h1>Photography</h1>
<hr />
<div class="portfolioContainer">
<div class="ImageCol">
<div class="portfolioContent">
<img src="https://www.tutorialspoint.com/docker/images/docker-mini-logo.jpg" />
<h3>Picture 1</h3>
<p>Docker</p>
</div>
</div>
<div class="ImageCol">
<div class="portfolioContent">
<img src="https://www.tutorialspoint.com/jira/images/jira-mini-logo.jpg" />
<h3>Picture 2</h3>
<p>JIRA</p>
</div>
</div>
<div class="ImageCol">
<div class="portfolioContent">
<img src="https://www.tutorialspoint.com/kubernetes/images/kubernetes-mini-logo.jpg" />
<h3>Picture 3</h3>
<p>Kubernates</p>
</div>
</div>
<div class="ImageCol">
<div class="portfolioContent">
<img src="https://www.tutorialspoint.com/ansible/images/ansible-mini-logo.jpg" />
<h3>Picture 4</h3>
<p>Ansible</p>
</div>
</div>
</div>
</main>
</body>
</html>
376 Views
