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
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
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time π.
36,263Members
Resources
Similar Threads
Was this page helpful?
