I have 4 lightboxes displayed as columns on my site. When screen size drops down to tablet and phone I want the images to display with 2 side-by-side and the other two underneath in the same manner. For some reason, there is something preventing the lightbox in the 3rd spot to display in line with the other lightboxes. How can I fix this issue?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
The columns element does not handle wrapping well when items are different heights. Your first item “Family” has a little bit more text than the second element, so that disrupts alignment in the second row.
A better approach to get the layout you want is to use the grid element.
Thanks @memetican You’re my hero! Thank you, thank you so much 
Any chance you can help me make the images match in height without breaking this or distorting the images? 
You can physically make them the same dimensions, or use object fit;