Re: [csswg-drafts] [css-grid-3] Designer/developer feedback on masonry layout (#10233)

@tabatkins can you speak to how you would achieve this use-case?

> 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:
> 
> ![image](https://private-user-images.githubusercontent.com/118243682/324662579-e422e18c-61b0-4ee3-bbb2-251e51b9b6c9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTcxNzI0ODksIm5iZiI6MTcxNzE3MjE4OSwicGF0aCI6Ii8xMTgyNDM2ODIvMzI0NjYyNTc5LWU0MjJlMThjLTYxYjAtNGVlMy1iYmIyLTI1MWU1MWI5YjZjOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNTMxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDUzMVQxNjE2MjlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01MmNjNmM4N2RiZjUzZjc4YjI2MDg2MjY5NTY3YWZkYjBjMGMwZmRkN2EyNGE2NTcxY2U2ZGQwNDkzMWE4OTgxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.TNkdwB4XGUFMd6JwGUPuAOkOBCljV6ishwepZr-82Z8)
> 
> 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.



-- 
GitHub Notification of comment by stubbornella
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10233#issuecomment-2142622737 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 31 May 2024 16:39:28 UTC