How to Align Images in CSS Grid: A Complete Guide to Organize Your Images Easily

Creating a responsive grid that fits your images collectively is a vital factor in building an optimized website. In CSS, grid alignment is not a piece of cake. The right alignment can do your business, or the wrong will drown.

Beginners get worried about how to align images in CSS grid. We are here to help you. In this article, we have highlighted the simplest hacks to align your images. Without any further delay, let’s read.

Importance of Image Grid in HTML CSS

Image grid in HTML & CSS has some advantages that you should know. These are:

1. Creates align-self value

In CSS, image grids have extra control. Once you create an image grid, this will lead the charge of control of your contents. For example, in Flexbox, the align items control the item on the Cross axis.

2. Adds responsiveness

You can create a responsive image grid so that it catches the user’s attention. Image grids have the power to make your site more responsive to the user. However, this will increase the number of people hitting your site as well.

3. User-friendly outlook

To some extent, alignment makes your content more organized in a systematic way. This makes the frame better looking. Research says people find organized pages more convenient to choose from.

How to Align Images in CSS Grid

To create a proper alignment, web developers often face severe issues. That’s why we have featured the step-by-step guidelines here to make it easier for you.

Step 1: Add the HTML

To create a grid at first, create HTML in your code editor. Open your code editor and initiate an HTML file. Now, paste the following codes:

<div class="container">
       <div class="item item1">Item 1</div>
       <div class="item item2">Item 2</div>
       <div class="item item3">Item 3</div>
       <div class="item item4">Item 4</div>
       <div class="item item5">Item 5</div>
       <div class="item item6">Item 6</div>
   </div>

Step 2: Create a CSS file

The next step is creating a CSS file to link your newly launched HTML File. Considering the Global styles, Copy the following code:

/* GLOBAL STYLES */
  
   * {
       box-sizing: border-box;
       }
      
   body {
   background-color: #AAA;
   margin: 50px;
   }
  
   .item {
   border: 5px solid #87b5ff;
   border-radius: 3px;
   font-size: 2em;
   font-family: sans-serif;
   font-weight: bold;
   background-color: #1c57b5
   }

Step 3: Start creating the CSS Grid

Now create a 5*5 Grid with a width of 150px. Keep the height of each row 100px. The gap between the two columns shouldn’t be more than 1 rem. Now paste the following:

.container {
   display: grid;
   grid-gap: 1rem;
   grid-template-columns: repeat(5, 150px);
   grid-template-rows: repeat(5, 100px);
   }

Now place the images on different areas with the help of the grid-column and grid-row properties and the numbered lines in the grid.

Step 4: Edit the CSS code

After that, edit the CSS code by using the following codes:

.item1 {
       grid-row: 1 / 3;
   }
  
   .item2 {
       grid-column: 2 / 4;
   }

   .item3 {
       grid-row: 1 / 4;
       grid-column: 4 / 5; 
   }

   .item4 {
       grid-row: 2 / -2;
       grid-column: 5 / -1;
   }

   .item5 {
       grid-row: 4 / -1;
       grid-column: 2 / 4;
   }

   .item6 {
       grid-row: 3 / -1;
   }

Step 5: Set the align-items property

To set the align-items property, edit your CSS grid with the following codes:

.container {
   display: grid;
   grid-gap: 1rem;
   grid-template-columns: repeat(5, 150px);
   grid-template-rows: repeat(5, 100px);
   align-items: center;
   }

Now all the items have auto height. That means the height gets adjusted according to the uploaded content in it. The following values are widely used as the alignment order.

• Start- The items are programmed flush to each other toward the start edge of the alignment container in the appropriate axis.

• Stretch- Here, Flex items are stretched such that the cross-size of the item’s margin box is the same as the line while respecting width and height constraints.

• End- In this type, the items are packed flush to each other toward the end edge of the alignment container in the appropriate axis.

Now test these values by using the following codes:

For Start value:

.container {
   display: grid;
   grid-gap: 1rem;
   grid-template-columns: repeat(5, 150px);
   grid-template-rows: repeat(5, 100px);
   align-items: start;
   }

These codes will place each item at the start of the corresponding grids. Likewise, the end value will set the items at the end of the corresponding grids.

For Stretch value:

In order to test the value stretch, edit the following codes into your CSS grid:

.container {
   display: grid;
   grid-gap: 1rem;
   grid-template-columns: repeat(5, 150px);
   grid-template-rows: repeat(5, 100px);
   align-items: stretch;
   }

Step 6: Use the justify items property (for Horizontal Axis)

Justify property works almost the same way the align property does. You can use the following code to place your images on the horizontal axis:

.container {
   display: grid;
   grid-gap: 1rem;
   grid-template-columns: repeat(5, 150px);
   grid-template-rows: repeat(5, 100px);
   align-items: center;
   justify-items: center;
   }

Now, the items will be perfectly placed in the respective areas. In the case of targeting one item, you should use both align and justify properties at the item level.

Step 7: Test the align and justify properties

To test if your codes are still working or not, paste the following codes:

.item2 {
       grid-column: 2 / 4;
       justify-self: stretch;
   }

   .item3 {
       grid-row: 1 / 4;
       grid-column: 4 / 5;
       align-self: stretch; 
   }

   .item4 {
       grid-row: 2 / -2;
       grid-column: 5 / -1;
       align-self: end;
   }

Here, item 2 stretches around the horizontal axis(following justify property)

Whereas item 3 stretches around vertically long the block axis. Item 4 is placed vertically at the end of its grid area. This means you have successfully aligned your images in the CSS grid.

 FAQs

<div class="container">
  <div class="cell cell-1">1.</div>
  <div class="cell cell-2">2.</div>
  <div class="cell cell-3">3.</div>
  <div class="cell cell-4">4.</div>
  <div class="cell cell-5">5.</div>
  <div class="cell cell-6">6.</div>
  <div class="cell cell-7">7.</div>
  <div class="cell cell-8">8.</div>
  <div class="cell cell-9">9.</div> 
</div>

Conclusion

For beginners, setting a perfect alignment for the images can be a challenging task. After all, an organized CSS grid can boost your site in many ways.

That’s why we have featured the simplest steps to guide you on how to align images in the CSS grid. We hope this article will help you in the best possible ways. Good luck!