This rule sets a 10px gap between grid items. The grid-gap property is a shorthand for grid-column-gap and grid-row-gap. The grid-auto-rows property sets the height of automatically generated rows. Grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)) /* 4 */Įstablish a block-level grid container. So the purpose of this tutorial is to re-create this responsive block effect ourselves.įor layouts where the width and height of content items are known, here's a horizontally-flowing masonry layout in pure CSS: really is a cool site, but what I find interesting is how these pinboards are laid out. How to Build a Site that Works Like Pinterest.Vertical space, sort of like a mason fitting stones in a wall. Works by placing elements in optimal position based on available Masonry is a JavaScript grid layout library. JavaScript solutions tend to use absolute positioning, which removes content items from the document flow in order to re-arrange them with no gaps. Something like this would probably require reflowing the document, so I'm not sure how useful or efficient it would be. In fact, until a CSS technology arrives with the ability to automatically close the gaps, CSS in general has no solution. So Grid, which is the best CSS has to offer for building a horizontally-flowing masonry layout, falls short in this case. The width and height of grid items must be known in order to close gaps with surrounding items. All other requirements are well within Grid's capacity. Grid Layout would be a perfect solution to your problem if the various heights of the content items could be pre-determined. As of this writing, it has a deficiency in all major browsers where the container doesn't expand to accommodate additional columns.Īs a result, a column-direction container is not an option in this case, and in many other cases.It requires the container to have a fixed height, so the items know where to wrap.The container expands horizontally, not vertically (like the Pinterest layout).Flex items flow vertically, not horizontally (like you need in this case).However, a column-direction container has four potential problems right off the bat: If you switch to flex-flow: column wrap, a grid-like layout is more attainable. It cannot wrap beneath div #2.Īs a result, when items aren't the tallest in the row, white space remains, creating unsightly gaps. Notice above how div #3 wraps below div #1, creating a new row. This means that a flex item cannot wrap under another item in the same row. In a flex container with flex-flow: row wrap, flex items must wrap to new rows. It's also a reason why the W3C has developed another CSS3 technology, Grid Layout. This is why flexbox has a limited capacity for building grids. Content items can span across rows and columns simultaneously, which flex items cannot do. A flex item is confined to its row or column.Ī true grid system is two-dimensional, meaning it can align items along horizontal AND vertical lines. This means it can align items along horizontal OR vertical lines. Is there some flexbox magic that makes this possible?ĬSS Grid Layout Level 3 includes a masonry feature.Ĭode will look like this: grid-template-rows: masonryĪs of March 2021, it's only available in Firefox (after activating the flag).Ī dynamic masonry layout is not possible with flexbox, at least not in a clean and efficient way.įlexbox is a one-dimensional layout system. Now I could change the server side rendering and reorder the items dividing the number of items by the number of columns, but that's complicated, error-prone (based on how browsers decide to split the item list into columns), so I'd like to avoid it if possible. Making items display: inline-block: wastes vertical space.While I need the elements to be ordered in rows, at least approximately: The problem with that solution is that elements are ordered in columns: There is a trivial solution to this that works in modern browsers, the column-count property. I can live with a fixed number of columns if I have to.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |