CSS Grid auto height of elements? (Pinterest Layout) #19

Closed
wesbos opened this Issue Jan 16, 2017 · 16 comments

Comments

Projects
None yet
10 participants
@wesbos

wesbos commented Jan 16, 2017

first- thanks so much for your work on everything grid!

I'm looking to make a layout like this.

Is this possible with grid? Rather than have the row's items stretch to the height of the largest one, I'd like the one underneath it to come up. I've looked at all your examples and I've modified this one to have one high item:

http://codepen.io/wesbos/pen/LxRaye

@rachelandrew

This comment has been minimized.

Show comment
Hide comment
@rachelandrew

rachelandrew Jan 16, 2017

Owner

That's not something grid is designed for. Grid is two dimensional so you are always working in both rows and columns at the same time. You can't use grid to do a "masonry" style layout like that. You could place items in that way if you had a lot of rows and managed how many each spanned, but you can't use auto-placement to get that kind of layout.

Owner

rachelandrew commented Jan 16, 2017

That's not something grid is designed for. Grid is two dimensional so you are always working in both rows and columns at the same time. You can't use grid to do a "masonry" style layout like that. You could place items in that way if you had a lot of rows and managed how many each spanned, but you can't use auto-placement to get that kind of layout.

@keithjgrant

This comment has been minimized.

Show comment
Hide comment
@keithjgrant

keithjgrant Jan 16, 2017

Yeah, that layout looks very flexboxy to me, with flex-direction: column and flex-wrap: wrap. The tricky part would be determining the appropriate height for the flex container, since it needs to be constrained in order to produce wrapping.

edit of course, that changes the order of the items

keithjgrant commented Jan 16, 2017

Yeah, that layout looks very flexboxy to me, with flex-direction: column and flex-wrap: wrap. The tricky part would be determining the appropriate height for the flex container, since it needs to be constrained in order to produce wrapping.

edit of course, that changes the order of the items

@rachelandrew

This comment has been minimized.

Show comment
Hide comment
@rachelandrew

rachelandrew Jan 16, 2017

Owner

Neither flexbox or Grid can really do this masonry thing, it's a bit of a different type of layout.

I'd love to come up with a solution for it, I think it fits better into flexbox type layout than grid type layout as it is a content out type of construction. However we don't have the tools currently to do it. That doesn't mean that a future level couldn't include such a feature, and that's part of why I'm collecting these use cases and seeing which things we can't do. As that's how we figure out what we need next.

Owner

rachelandrew commented Jan 16, 2017

Neither flexbox or Grid can really do this masonry thing, it's a bit of a different type of layout.

I'd love to come up with a solution for it, I think it fits better into flexbox type layout than grid type layout as it is a content out type of construction. However we don't have the tools currently to do it. That doesn't mean that a future level couldn't include such a feature, and that's part of why I'm collecting these use cases and seeing which things we can't do. As that's how we figure out what we need next.

@rachelandrew

This comment has been minimized.

Show comment
Hide comment
@rachelandrew

rachelandrew Jan 16, 2017

Owner

And with grid you can fake that sort of layout by spanning rows, so you can get the look of that - just not with auto-placement. I've got a bit of that going on here: http://codepen.io/rachelandrew/pen/QKwvxJ

So if you know how many columns you have you can do quite a lot by spanning different numbers of rows.

Owner

rachelandrew commented Jan 16, 2017

And with grid you can fake that sort of layout by spanning rows, so you can get the look of that - just not with auto-placement. I've got a bit of that going on here: http://codepen.io/rachelandrew/pen/QKwvxJ

So if you know how many columns you have you can do quite a lot by spanning different numbers of rows.

@wesbos

This comment has been minimized.

Show comment
Hide comment
@wesbos

wesbos Jan 16, 2017

thanks a lot for the response - sad to hear we still can't do this layout with just CSS.

I think CSS columns come closest to it, but the content goes top to bottom rather than left to right. I wonder if maybe a direction on CSS columns would be something worth thinking about.

Thanks again!

wesbos commented Jan 16, 2017

thanks a lot for the response - sad to hear we still can't do this layout with just CSS.

I think CSS columns come closest to it, but the content goes top to bottom rather than left to right. I wonder if maybe a direction on CSS columns would be something worth thinking about.

Thanks again!

@wesbos wesbos closed this Jan 16, 2017

@chriscoyier

This comment has been minimized.

Show comment
Hide comment
@chriscoyier

chriscoyier Jan 16, 2017

It does seem like CSS columns is the closest thing. In the current design of CSS-Tricks, I went for columns because I wanted to give the cards/masonry look a go, but keeping it as simple as possible. By far the biggest complaint is the up-down chronological-ness rather than left-right. Maybe someday column-direction can be a thing, or something.

It does seem like CSS columns is the closest thing. In the current design of CSS-Tricks, I went for columns because I wanted to give the cards/masonry look a go, but keeping it as simple as possible. By far the biggest complaint is the up-down chronological-ness rather than left-right. Maybe someday column-direction can be a thing, or something.

@wesbos wesbos changed the title from CSS Grid auto height of elements? to CSS Grid auto height of elements? (Pinterest Layout) Jan 16, 2017

@rachelandrew

This comment has been minimized.

Show comment
Hide comment
@rachelandrew

rachelandrew Jan 16, 2017

Owner

I'm not sure I like column-direction as a column kinda needs to be ... a column :D especially once you add to the mix the fact that not all languages run left to right and top to bottom.

However I do think this kind of layout needs to be a thing in CSS so these ideas and use cases are excellent and very useful.

Owner

rachelandrew commented Jan 16, 2017

I'm not sure I like column-direction as a column kinda needs to be ... a column :D especially once you add to the mix the fact that not all languages run left to right and top to bottom.

However I do think this kind of layout needs to be a thing in CSS so these ideas and use cases are excellent and very useful.

@inorganik

This comment has been minimized.

Show comment
Hide comment
@inorganik

inorganik Jan 16, 2017

Here's a pen doing it with flexbox and only 12 lines of javascript. I know the idea was not using javascript, but I think 12 lines is a small price to pay.

inorganik commented Jan 16, 2017

Here's a pen doing it with flexbox and only 12 lines of javascript. I know the idea was not using javascript, but I think 12 lines is a small price to pay.

@abusedmedia

This comment has been minimized.

Show comment
Hide comment
@abusedmedia

abusedmedia Jan 18, 2017

@inorganik, even tough I do like jQuery, you cannot say it's 12 line of js

@inorganik, even tough I do like jQuery, you cannot say it's 12 line of js

@inorganik

This comment has been minimized.

Show comment
Hide comment
@inorganik

inorganik Jan 18, 2017

@abusedmedia I removed the jQuery, now it's 13 lines 😃

@abusedmedia I removed the jQuery, now it's 13 lines 😃

@programmer5000-com

This comment has been minimized.

Show comment
Hide comment
@programmer5000-com

programmer5000-com Feb 7, 2017

Why is this closed? It would be a nice feature of CSS

Why is this closed? It would be a nice feature of CSS

@rachelandrew

This comment has been minimized.

Show comment
Hide comment
@rachelandrew

rachelandrew Feb 8, 2017

Owner

@programmer5000-com I think you misunderstand what this is. This is just a Q&A about grid, the Issue is closed because the original Q was answered. Linked in the thread is an issue on the CSS WG drafts if you wanted to follow that.

Owner

rachelandrew commented Feb 8, 2017

@programmer5000-com I think you misunderstand what this is. This is just a Q&A about grid, the Issue is closed because the original Q was answered. Linked in the thread is an issue on the CSS WG drafts if you wanted to follow that.

@luck2011

This comment has been minimized.

Show comment
Hide comment
@luck2011

luck2011 Nov 4, 2017

yes, column-direction please.

luck2011 commented Nov 4, 2017

yes, column-direction please.

@carolineportugal

This comment has been minimized.

Show comment
Hide comment
@carolineportugal

carolineportugal Dec 1, 2017

yes, different item-height allowed in same row please.

yes, different item-height allowed in same row please.

@andreiglingeanu andreiglingeanu referenced this issue in WordPress/gutenberg Jan 29, 2018

Closed

Gallery Block: Try masonry layout option #4734

@champramentio

This comment has been minimized.

Show comment
Hide comment
@champramentio

champramentio Apr 18, 2018

You can check this : http://w3bits.com/css-masonry/. Works like a charm for me

You can check this : http://w3bits.com/css-masonry/. Works like a charm for me

@luck2011

This comment has been minimized.

Show comment
Hide comment
@luck2011

luck2011 Apr 19, 2018

@champramentio CSS3 grid was created for static lists, like the link you gave. When new items are added into the list(like paginations), it will fail.

luck2011 commented Apr 19, 2018

@champramentio CSS3 grid was created for static lists, like the link you gave. When new items are added into the list(like paginations), it will fail.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment