- From: Roland via GitHub <sysbot+gh@w3.org>
- Date: Thu, 13 Jun 2024 14:26:23 +0000
- To: public-css-archive@w3.org
> I recently came across a use-case at work where we want a 2-column layout on desktop, and a single column on mobile. But we want the top item of the right column to be "in the middle" of the single column, and the bottom item of the right column to be at the bottom of the single column like so: > >  > > Currently as far as I know there is no way to achieve this in CSS, but with masonry grid it is quite simple to achieve, as shown in this codepen: > > https://codepen.io/dougalg/pen/GRLPZea > > The benefits of grid here are ability to pull items naturally into different columns following the standard grid syntax, and doing so allows to maintain tab order easily to achieve the desired flow both on mobile and desktop. Hi I have more or less the same use case, and I think it's a common pattern for a e-commerce product-detail page. Most of them have a Product image/gallery on the left and next to it a buy-block and on a smaller screen they should stay together, but you don't want any whitespace below the image or below the buy-block I made a screenshot so I hope you will understand it a bit better. <img width="631" alt="Screenshot 2024-06-13 at 16 17 31" src="https://github.com/w3c/csswg-drafts/assets/1931880/72ac78c4-68fb-496c-8776-51ed7e1d220d"> first (brow block) is Image/Gallery, the blue block is buy-block and the rest are al kinds of blocks that can come in all kinds of types. The current situation is that they use 2 templates a single column for small devices with a device check, and 2 columns for desktop like devices. But Ideal you jest want 1 template for it. -- GitHub Notification of comment by rol4nd909 Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10233#issuecomment-2165836570 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 13 June 2024 14:26:24 UTC