Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Allen Henderson
Allen Henderson
8,913 Points

Question about CSS Grid?

I have a website and within it is a gallery of the places I've been. My question is: Why can't I place the images using grid-row-start grid-row-end grid-column-start and grid-column-end

Here's the HTML

<h2>St. Louis, Missouri</h2>

            <p>Amber and I took a 4 hour drive to St. Louis, Missouri to check out the area and ride scooters. It was a lot of fun. Unfortunately, we did <b><u>not</u></b> get to ride into the arch because it was sold out.</p>

            <div class="photo-gallery-template-1" id="st-louis-missouri">
                <img class="photo-gallery-template-1-image-first" src="img/my-fun-adventures/st-louis-missouri/190993658_3433050313393841_827777003845184498_n.jpg" alt="">
                <img class="photo-gallery-template-1-image-second" src="img/my-fun-adventures/st-louis-missouri/191207705_3433053746726831_1472218881480912923_n.jpg" />
                <img class="photo-gallery-template-1-image-third" src="img/my-fun-adventures/st-louis-missouri/191224733_3433050716727134_5772989000616145053_n.jpg" />
                <img class="photo-gallery-template-1-image-fourth" src="img/my-fun-adventures/st-louis-missouri/191333907_3433051456727060_7308306503458242825_n.jpg" />
                <img class="photo-gallery-template-1-image-fifth" src="img/my-fun-adventures/st-louis-missouri/191399030_3433052790060260_4869841379528037836_n.jpg" />
            </div>

Here's the CSS

.photo-gallery-template-1 {

    display: flex;
    width: 100%;
    flex-direction: row;
    grid-template-columns: repeat(10, 8.5%);
    grid-template-rows: repeat(10, 240px);
}

.photo-gallery-template-1 img {

    width: 100%;
    height: auto;
    display: grid;

}

1 Answer

Abner Rivera
Abner Rivera
14,027 Points
Abner Rivera
Abner Rivera
14,027 Points

The grid should be the container, so in .photo-gallery-template-1 you should change "display: flex" to "display: grid". In that way, you'll be able to style the items inside: "photo-gallery-template-1-image-first", "photo-gallery-template-1-image-second" and so on. In the image (".photo-gallery-template-1 img") grid won't work because it is not a container but an item.