Flexbox The most efficient solution to your problem is probably flexbox, as flex items are not confined to individual tracks (columns/rows) like grid items. .grid { display: flex; flex-wrap: wrap; margin-bottom: 1em; } .item { flex: 1 0 100px; background: #eee; text-align: center; border: 1px dashed gray; box-sizing: border-box; } <div class=”grid”> <div class=”item”>Item 1</div> … Read more
One way to get the number of rows/columns of a css grid is by using the grid-template-rows or grid-template-columns from the computed style of the grid window.getComputedStyle(grid). The returned values are always transformed to separated pixel values (e.g. 20px 20px 50px), where each value represents the size of the respective column/row. All that’s left to … Read more
The second rule doesn’t work because min-content is an intrinsic sizing function. § 7.2.2.1. Syntax of repeat() Automatic repetitions (auto-fill or auto-fit) cannot be combined with intrinsic or flexible sizes. § 11. Grid Sizing An intrinsic sizing function (min-content, max-content, auto, fit-content()). A flexible sizing function [is a dimension with the fr unit].
Apparently it’s a bug on Chrome which detailed here: https://github.com/rachelandrew/gridbugs#10-some-html-elements-cant-be-grid-containers And tracked here: https://bugs.chromium.org/p/chromium/issues/detail?id=375693 (I don’t see a progress here. If it fixed, please edit the answer or I will if I remember)
Below are five options for achieving this layout: CSS Positioning Flexbox with Invisible DOM Element Flexbox with Invisible Pseudo-Element Flexbox with flex: 1 CSS Grid Layout Method #1: CSS Positioning Properties Apply position: relative to the flex container. Apply position: absolute to the green flex item. Now the green square is absolutely positioned within the … Read more
The key is to use auto-fill instead of auto-fit. When the repeat() function is set to auto-fit or auto-fill, the grid container creates as many grid tracks (columns/rows) as possible without overflowing the container. Note that as the grid container is being rendered, the presence of grid items is irrelevant. The container just lays out … Read more
Another workaround for this issue is to use the form as the grid object and use display: contents on the fieldset. This doesn’t break semantic markup, though if there are multiple elements within the form they will all be included in the grid. .some-form { display: grid; grid-template-columns: 1fr 1fr 1fr; } .some-form__fields { display: … Read more
Change the grid to three columns and set the first div to span them all at the appropriate point. .footer-inner { display: grid; grid-template-columns: repeat(3, 1fr); } .footer-inner div { border: 1px solid grey; text-align: center; } .footer-inner :first-child { grid-column: 1 / -1; } <div class=”footer-inner”> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> </div>
The grid-row-gap and grid-column-gap properties apply to the entire grid (spec reference). However, you can use negative margins on the second row grid items to adjust their position. Another option would be to remove the top row (headers) from the current grid and place it in a different container directly above the data. This would … Read more