Instead of this: grid-template-rows: min-content auto Try this: grid-template-rows: min-content 1fr With 1fr you’re telling the second row to consume any and all free space available in the column. Hence, when there is no content in the .first element, the .second element takes the space. The problem with auto is that its length is relative … Read more
Is there any grid trick I can do to achieve this, grid-row-gap only seems to take one value, which it uses for all rows. With the grid-row-gap, grid-column-gap and grid-gap properties, you cannot apply different widths to different gaps. Like you noted, only one value can be used for each axis: One for row gaps … Read more
the problem you are facing here is, that your section block consumes the full height. so it won’t stick, since it is too large to do so. you would need to put a child element inside your section and give that your sticky attributes, to make it work. based on your example, i simply wrapped … Read more
The vertical gaps are caused by the images not filling the vertical space in the grid items. The problem is made worse with align-items: center on the container, which removes the align-items: stretch default. Essentially, there are no gaps between grid items. They form a clean, neatly-arranged grid. But because the images are smaller than … Read more
I had a similar question when playing around with grid: grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr)) If we take a look at the documentation we can see that minmax command is valid: https://developer.mozilla.org/en-US/docs/Web/CSS/minmax But in a repeat documentation on csswg, it states one simple rule that disallows all of this from happening; https://drafts.csswg.org/css-grid/#funcdef-repeat The generic form of … Read more
Adding grid-template-rows: 1fr min-content; to your .grid will get you exactly what you’re after :). .grid { display: grid; grid-template-columns: 1fr 3fr; grid-template-rows: 1fr min-content; grid-template-areas: “one two” “one three” } .one { background: red; grid-area: one; padding: 50px 0; } .two { background: green; grid-area: two; } .three { background: blue; grid-area: three; } … Read more
To style an arbitrary row, you could use a wrapper element with its display set to contents. See the code snippet below: .grid-container { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 2px; } .grid-item { border: 1px solid black; padding: 5px; } .grid-row-wrapper { display: contents; } .grid-row-wrapper > .grid-item { background: skyblue; } <div class=”grid-container”> … Read more
Grid Layout provides multiple methods for re-arranging grid items. I’ve listed four below. The grid-template-areas property Line-based placement The order property The dense function of the grid-auto-flow property. (Possibly the simplest, easiest and most robust solution for this type of layout, as it works for any number of grid items.) Here’s the original layout: grid-container … Read more
I had the same situation and found a clean solution. Instead of using a huge row span value, try: grid-column: 1/-1; As negative number counts from the right, this code specifies the grid-column to the end of the last column. Note: In case this doesn’t apply, check Jonny Green’s solution in the below comment.
2021 Update CSS Grid Layout Level 3 includes a masonry feature. Code will look like this: grid-template-rows: masonry grid-template-columns: masonry As of March 2021, it’s only available in Firefox (after activating the flag). https://drafts.csswg.org/css-grid-3/#masonry-layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout end update; original answer below Flexbox A dynamic masonry layout is not possible with flexbox, at least not in a … Read more