One of the Related posts gave me the (simple) answer. Apparently the auto value on the grid-template-rows property does exactly what I was looking for. .grid { display:grid; grid-template-columns: 1fr 1.5fr 1fr; grid-template-rows: auto auto 1fr 1fr 1fr auto auto; grid-gap:10px; height: calc(100vh – 10px); }
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
Currently, flexbox offers no clean solution for aligning flexible items in the last row or column. It’s beyond the scope of the current spec. Here’s more information and various solutions people have used to get around the problem: Targeting flex items on the last row Is it possible for flex items to align tightly to … Read more
I was looking for the same answer and since I couldn’t find any useful response for this problem, I managed to solve it by myself. Here is my solution that works perfectly fine using only CSS Grid. TL;DR Solution A – recommended (3 – 5 columns with a min-width of 64px per column) /* Note … Read more
Since you are treating this as a table, where the elements stay in the same row, you can also wrap each row in a DIV with “display” set to “contents.” This forms an innocuous parent element that you use for hover, and then style the child elements. (display: contents is not yet supported in Edge, … Read more
Use grid-auto-rows (automatically generated rows) instead of grid-template-rows (manually generated rows). In current case grid-auto-rows: 150px will do the trick. Demo: .grid { display: grid; grid-auto-rows: 150px; /* space between columns for demo */ grid-gap: 10px; } /* just styles for demo */ .grid__item { background-color: tomato; color: white; } <div class=”grid”> <div class=”grid__item”>One</div> <div … Read more
Potential Problem #1 The last margin is not being collapsed. It’s being ignored. The overflow property applies only to content. It doesn’t apply to padding or margins. Here’s what it says in the spec: 11.1.1 Overflow: the overflow property This property specifies whether content of a block container element is clipped when it overflows the … 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
What you intend to do can be done using CSS flexbox—there is no need to use CSS grid. The bad news is that HTML + CSS is not so smart that declaring resize and draggable will make the layout flexible and adjustable by user interaction. For that, you will have to use JS. The good … Read more
CSS Grid offers the fr unit, which functions similarly to flex-grow. While flex-grow distributes free space in the container among flex items, the fr unit distributes free space in the container among rows / columns. From the spec: 7.2.3. Flexible Lengths: the fr unit A flexible length or <flex> is a dimension with the fr … Read more