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>
Updated on: 2023-12-14T11:27:12+05:30

588 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements