Search code examples
csscss-grid

Images are not aligning using css grid

Problem

I am trying to get my images to align properly two images on the top and one on the bottom with equal gap space. I also want to shrink the images to have some white space on the sides. I am learning how to use the css grid so I am struggling with this part.

Here is the goal:

goal

Here is what mine looks like notice that it is considerably larger it fits the width of the page so I need to shrink the images:

mine

Here is my html:

    <section class="container">
      <div class="second_section_heading">
        <img src="images/squigly.jpg" alt="horizontal squiggly">
        <h1>SEASONALLY INSPIRED</h1>
        <h3>fresh flavors to celebrate each season</h3>
      </div>
      <!--Going to need grid system for this area-->
      <div class="wrapper">
        <div class="photo1"><img src="images/home_seasonal_1.jpg" alt="horizontal squiggly"></div>
        <div class="photo2"><img src="images/home_seasonal_2.jpg" alt="horizontal squiggly"></div>
        <div class="photo3"><img src="images/home_seasonal_3.jpg" alt="horizontal squiggly"></div>
      </div>
    </section>

Here is my css:

.wrapper{
      display:grid;
      grid-template-columns:1fr 2fr 1fr;
      grid-auto-rows:minmax(100px, auto);
      grid-gap:2em;
      grid-row-gap:-2em;
      justify-items:center;
      align-items:center;
    }


.photo1{
      /*align-self:start;*/
      grid-column:1/2;
      grid-row:1/2;
    }

.photo2{
      /*align-self:end;*/
      grid-column:2;
      grid-row:1/2;
    }

.photo3{
      /*justify-self:end;*/
      grid-column:1/3;
      grid-row:2;
    }

I will appreciate any guidance thank you in advance.

Solution

  • Take this as a guide, and keep in mind a couple of things about CSS Grid; when you set grid-column: 1/3 you are setting that item to use the space of TWO columns, from grid-line 1 (which is the left border of the grid), to grid-line 3 (which might be the right border of the grid), assuming you have two columns defined. You are NOT telling the item to span columns 2 - 3, that's not how CSS Grid works; it works by grid-lines; you can read more about this here: A Complete Guide to Grid

    If you want the grid not to span the full width, then you should define a max size for it, instead of using fr units for the items, chose a max width; since fr will use fractions of total available space

    But the specific issue with the image not aligning I'm pretty sure it has to do with the image itself not using the space available or having some white space on it that makes it look like its not aligned; try putting a border on each item to see where are they positioned.

    .wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(100px, auto);
  justify-content: start;
  grid-gap: 10px;
}

.item-1 {
  border: 1px solid red;
}

.item-2 {
  grid-column: 2/5;
  border: 1px solid blue;
}

.item-3 {
  grid-column: span 4;
  border: 1px solid green;
}

img {
  display: block;
}
    <div class="wrapper">
  <div class="grid-item item-1">
    <img src="" />
  </div>
  <div class="grid-item item-2">
    <img src="" />
  </div>
  <div class="grid-item item-3">
    <img src="" />
  </div>
</div>