- From: sergio9929 via GitHub <sysbot+gh@w3.org>
- Date: Tue, 30 Apr 2024 19:47:45 +0000
- To: public-css-archive@w3.org
@dougalg-js-tw > 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. You can easily achieve it with CSS using `order` and `display: contents`, here is an example: https://codepen.io/sergio9929/pen/zYXQwPQ -- GitHub Notification of comment by sergio9929 Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10233#issuecomment-2086913230 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 30 April 2024 19:47:46 UTC