Grid not behaving as expected

1

In my portfolio project I have a section to display the projects I have completed. A combo of the project image and description is called a portfolio-item, which are displayed in a grid system of two columns, and two rows. The column to hold the text should always be 2fr, while the column to hold the image should be 1fr. I want every other portfolio-item to be displayed in reverse order: image on the left, and text description on the right. However, when I do that, another row is being created with the image placed on that second row.

Screen Shot 2020-08-04 at 4.44.42 PM
Screen Shot 2020-08-04 at 4.44.42 PM1212Ă—722 165 KB

Same image, but showing grid system:

Screen Shot 2020-08-04 at 4.45.04 PM
Screen Shot 2020-08-04 at 4.45.04 PM1280Ă—800 217 KB

Does anyone know how to fix this problem? Thanks.

HTML code:

<!-- Projects -->
      <section id="projects">
        <div class="heading">
          <h2>Here are some projects I have developed</h2>
        </div>
        <!-- User Story #4: The projects section should contain at least one element with a class of project-tile to hold a project.
        User Story #5: The projects section should contain at least one link to a project. -->
          <div class="container">
            <div class="portfolio-item">
              <!-- survey-form -->
              <div class="portfolio-description" data-aos="fade-left" data-aos-delay="600">
                <h2>Survey Form</h2>
                <h3>Design/Web Developement</h3>
                <p>A survey form to access the background of people who consider themselves to be a feminist.
                </p>
              </div>
              <div class="portfolio-img">
                  <img src="/static/images/project-images/survey-form.png" alt="">
              </div>
            </div>
            <!-- product-landing-page -->
            <div class="portfolio-item reverse">
              <div class="portfolio-description" data-aos="fade-left" data-aos-delay="600">
                <h2>Product Landing Page</h2>
                <h3>Design/Web Developement</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum laboriosam iusto consequatur earum aliquam voluptatum! Voluptatem quod eius doloribus hic a, tenetur, error esse ratione maiores, necessitatibus quisquam doloremque asperiores?
                </p>
              </div>
              <div class="portfolio-img">
                  <img src="/static/images/project-images/product-landing-page.png" alt="">
              </div>
            </div>
            <!-- tribute-page -->
            <div class="portfolio-item">
              <div class="portfolio-description" data-aos="fade-left" data-aos-delay="600">
                <h2>Tribute Page</h2>
                <h3>Design/Web Developement</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum laboriosam iusto consequatur earum aliquam voluptatum! Voluptatem quod eius doloribus hic a, tenetur, error esse ratione maiores, necessitatibus quisquam doloremque asperiores?
                </p>
              </div>
              <div class="portfolio-img">
                  <img src="/static/images/project-images/marielle-franco-tribute-page.png" alt="">
              </div>
            </div>
            <!-- documentation-page -->
            <div class="portfolio-item reverse">
              <div class="portfolio-description" data-aos="fade-left" data-aos-delay="600">
                <h2>Documentation Page</h2>
                <h3>Design/Web Developement</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum laboriosam iusto consequatur earum aliquam voluptatum! Voluptatem quod eius doloribus hic a, tenetur, error esse ratione maiores, necessitatibus quisquam doloremque asperiores?
                </p>
              </div>
              <div class="portfolio-img">
                  <img src="/static/images/project-images/documentation-page.png" alt="">
              </div>
            </div>
          </div>
      </section>

CSS code:


/***********************
  Start Project section
  **********************/
  
  .portfolio-description h2 {
    font-size: 1.8rem;
    font-weight: 400;
    color: #2e2e2e;
    padding-bottom: 1rem;
  }

  .portfolio-description h3 {
    font-size: 1.5rem;
    font-weight: 300;
    text-transform: uppercase;
    color: #2e2e2e;
    padding-bottom: 1.5rem;
  }

  .portfolio-item {
    display: grid;
    grid-template-columns: 2fr 1fr;
    justify-items: start;
    align-items: center;
  }

  .portfolio-img img,
  .portfolio-description {
    padding-bottom: 1rem;
  }

  .reverse {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr;
    justify-items: end;
    align-items: center;
  }

  .reverse .portfolio-description {
    grid-column: 2/3;
  }

  .reverse .portfolio-img img {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  /***********************
  End Project section
  **********************/
2

I can’t give you a full answer but this is what I would do.

If there is a system of 2 columns, and you want all text on the left, just write a class like this:

.text {grid-column:1/2}
If that’s too much work you can probably select the pars by odd/even.

And add this class to the paragraphs. There is a nice representation here.

3

Hi, I tried your code locally and found that if I take the image container and move it above the text container for the reverse rows, the layout seem correct.

4

Hi ProgMan, thanks for your contribution. I was trying to avoid that.

5

Yeah, it looks like we have tell the image container what row to start on.

.portfolio-img {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
}

Hope this helps out.

6

I tried selecting it by odd/even and I had the very same result, with the image being pushed to a second row that isn’t supposed to be there. Thx

7

I have done that already:

.reverse .portfolio-img img {
grid-column: 1/2;
grid-row: 1/2;
}

And I know that the selection is correct. I applied a border just to test it. Dang, this problem is a pain! I guess I’ll just put the img div above the text div in the HTML document, but I think that’s such a wack solution. I wish I understood what’s wrong with my code.

8

Try this, I have removed the “img” at the end. This was targeting the image, not the container.

.reverse .portfolio-img {
    grid-column: 1/2;
    grid-row: 1/2;
  }
9

The solution I have found was:

.reverse {
display: flex;
flex-direction: row-reverse;
}

I’m not happy with that, because I wish I understood why the grid wasn’t behave as I thought it should. At least the page now looks like the way I wanted it to. Thanks to all that gave their contributions!

10

This targets the image inside of .portfolio-img, this is not what you want

.reverse .portfolio-img img {
    grid-column: 1/2;
    grid-row: 1/2;
  }

This targets the .portfolio-img container. This worked for me right here on my computer.

.reverse .portfolio-img {
    grid-column: 1/2;
    grid-row: 1/2;
  }
1 Like
11

Ok. I know what’s wrong with the grid. Yay!

I need to tell the text to only occupy one row. As you can see in the second picture with the grid lines and numbers, it doesn’t look like the text is “leaking” into another row. But, the grid-row: 1/2 of code below fixed it all!

.reverse .portfolio-description {
grid-column: 2/3;
grid-row: 1/2;
}

I had specified both grid-column and grid-row for the image, but for the text portion I was just specifying grid-column.

12

I see. Very nice! Thank you so much for the answer!