3×3 Image Grid In HTML and CSS

3x3 Image Grid In HTML and CSS
Code Snippet:Simple 3x3 CSS Grid
Author: Chris Sev
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 1,572
License: MIT
Edit Code online: View on CodePen
Read More

This code creates a grid of 3×3 image containers using HTML and CSS. The core functionality lies in structuring the grid layout for showcasing images. It’s perfect for presenting images in an organized manner on your web page.

You can integrate this code to showcase your photography, design work, or art in a grid layout on your portfolio website.

How to Create a 3×3 Image Grid In HTML and CSS

1. First of all, load the Normalize CSS by adding the following CDN link into the head tag of your HTML document. It ensures a consistent rendering of elements across different browsers.

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

2. Next, construct the HTML structure for our 3×3 image grid. This code section defines the container and individual image boxes within the grid. We use the “game-board” class for the grid container and “box” class for each image box. You can replace the image sources and alt text with your own content.

<div class="game-board">
  <div class="box"><img src="https://source.unsplash.com/200x200/?natural" alt="Image Grid"> </div>
  <div class="box"><img src="https://source.unsplash.com/200x200/?sunset" alt="Image Grid"></div>
  <div class="box"><img src="https://source.unsplash.com/200x200/?trees" alt="Image Grid"></div>
  <div class="box"><img src="https://source.unsplash.com/200x200/?beauty" alt="Image Grid"></div>
  <div class="box"><img src="https://source.unsplash.com/200x200/?tech" alt="Image Grid"></div>
  <div class="box"><img src="https://source.unsplash.com/200x200/?cat" alt="Image Grid"></div>
  <div class="box"><img src="https://source.unsplash.com/200x200/?girl" alt="Image Grid"></div>
  <div class="box"><img src="https://source.unsplash.com/200x200/?rose" alt="Image Grid"></div>
  <div class="box"><img src="https://source.unsplash.com/200x200/?car" alt="Image Grid"></div>
</div>

3. Finally, style our 3×3 image grid using CSS. This code snippet defines the grid layout, box styling, and overall appearance. It ensures that the images are displayed in a visually appealing grid format.

.game-board {
  display: grid;
  grid-template-rows: 200px 200px 200px;
  grid-template-columns: 200px 200px 200px;
}

body {
  display: flex;
  justify-content: center;
}

.box {
  background: #444;
  border: 1px solid #555;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #AAA;
}

That’s all! hopefully, you have successfully created a 3×3 image grid on your website. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X