How can a last implicit row have a different height?

Question

This workspace https://w.trhou.se/z74zcrghf8 is a css grid example that contains several photo cards (items). Let's imagine that these items are created dynamically by any server side logic. The last item in the grid container is a div element defined as a footer for that grid, which also contains a button that has to be center aligned inside its parent. By the grid definition, the footer takes the height of the implicit row: 200px. The footer element spans 3 columns of the grid. How can the footer have a smaller size than the grid-auto-rows property, defined on the grid container?

Note. Refer to index.html and css/grid.css to see the code. The example can be seen live here: https://w.trhou.se/z74zcrghf8

Thanks for the help.

Answer 1 · 2017-11-07T01:30:18Z

November 7, 2017 1:30am

Hi Juan,

You already targeted it in your CSS. Can't you just set the height there?

.photos-footer {
    background-color: lightgreen;
    grid-column: 1 / 3;
    height: 50px; /* make it a smaller height */
}

Or by dynamic do you mean some unknown number of objects will be sent by the server? In that case, how about this?

.photos:last-child { /* target the last grid item */
    background-color: lightgreen;
    grid-column: 1 / 3;
    height: 50px; /* make it a smaller height */
}

Welcome to the Treehouse Community

Looking to learn something new?

Juan Francisco Andrade Álvarez

Juan Francisco Andrade Álvarez

How can a last implicit row have a different height?

1 Answer

darryn

darryn