ChooKing

PostsComments

KPCKevin Powell - Community

•Created by ChooKing on 9/27/2023 in #front-end

Challenge #1 Alternate Solution

I already submitted a more normal grid solution for Challenge #1 and the deadline passed, but I wanted to also do one using a more esoteric solution. This one uses display:table. This is an alternate way to get a table-like structure without using an actual table in HTML. The benefit of this approach is that it can be applied conditionally based on nth-child. The spacer underneath the photo is accomplished via a div that has no content and no size set. When that spacer is given display:table-cell, its parent is given display:table-row, and the card is give display:table, the spacer div takes the width of the table cell above it which holds the image. Leaving these display properties as default on the other cards makes the spacer have 0 width and 0 height, because it has no content and no explicit size. Note: I am not recommending using this approach on a regular basis. https://codepen.io/chooking/pen/yLGjrbV

1 replies