How can I make this layout?
I have tried to make it with flex and grid but the problem is the row height is defined by the largest item. This leaves whitespace below shorter items. I have also tried using flex columns with wrap and a fixed container height but the number of images is dynamic causing them to overflow.
Does anybody know how to make this?
11 Replies
@husnain214 perhaps like this
https://codepen.io/-bloop-/pen/yLxdJNj
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Yea will be nice when we actually get it 😭
it's behind a flag in Firefox for a while and based on grid layout,
grid-template-rows / grid-template-columns: masonry
Apple, Google, and M$ don't seem to be interested in implementing it.
Apple only just implemented subgrid. Chrome still lacks support.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout
https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/Masonry layout - CSS: Cascading Style Sheets | MDN
Level 3 of the CSS Grid Layout specification includes a masonry value for grid-template-columns and grid-template-rows. This guide details what masonry layout is, and how to use it.
Chris Coyier
CSS-Tricks
Approaches for a CSS Masonry Layout | CSS-Tricks
Masonry layout, on the web, is when items of an uneven size are laid out such that there aren't uneven gaps. I would guess the term was coined (or at least
a possible workaround might work using grid-auto-rows and grid-auto-flow with a dense layout.
try a finer base grid (16 - 20 columns) horizontally and combine with
grid-auto-rows and a matching/suitable row size so you get more cells.
set the item's grid-colum-end / grid-row-end to use i.e. span 2 or more for the "regular" size and raise the value in either direction for the larger ones based on their aspect ratio, i.e. span 5 or 6.
instead of a gap use a thick outline with negative offset or an inset box-shadow in the background color to fake the space (margin and padding on grid items may cause scroll overflow).
would be lots of trial and error here for your content.
.. or use one of the many JS libraries for masonry layouts 🙂oh shit ;-;
i accidentally changed da code
faaaaaa
my 20mins of effort 🥲
@ʙᴏᴏʙ 2.0 @WebMechanic @b1mind @monimolimnion Thank you guys. I ended up finding the columns property and it works somehow. It made no sense to me how it exists and it gave me the result with literally one line. You can see the solution here:
https://my-unsplash.fly.dev/
By the way, the layout looks perfect in Firefox but not in Edge and Chrome, the second and third images are messed up. If any of you know what the issue is, please tell me.
My Unsplash
Web site created using create-react-app
It's not that Safari and Chromium don't want to implement it, it's that it's level 3 of the grid spec... they need to figure out subgrid first 😅
Safari is there, and I wouldn't be surprised if it suddenly shows up in the next 6 months there.
Chromium team is still working on subgrid, and seems to be having a lot of trouble and issues with implementing it, so it might be awhile... I honestly thought we'd have it already as they started working on it in earnest like 6 months+ ago.
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View