Question

.grid-wrapper {
    display: grid;
    grid-template-columns: [start] repeat(2, 1fr) [left] 1fr [half] 1fr [right] repeat(2, 1fr) [end];
    grid-template-rows: auto; /* repeat(4, 1fr); */
    grid-gap: 30px;
}

.grid-item {
    min-height: 100px;
    background: #f3f3f3;
    grid-column: span 2;
    grid-row: auto;
}

    <div class="grid-wrapper">
        <div class="grid-item" style="grid-column: start / half;"></div>
        <div class="grid-item" style="grid-column: half / end;"></div>
        <div class="grid-item" style="background: silver; grid-column: start / right;"></div>
        <div class="grid-item" style="background: #999; grid-column: right / end; grid-row: span 3;"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item" style="background: #666; grid-row: span 2;"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item" style="background: #d8d8d8; grid-column: left / end;"></div>
        <div class="grid-item"></div>
    </div>

我有一个非常简单的6列网格。当在两列或两行上放置一些网格项时，Chrome会显示带有意外空格的结果。 FF和Safari等其他浏览器都在正确执行此操作。将grid-template-rows设置为repeat（4，1fr）可以解决此问题，但是grid-template-rows：auto是否也可以工作吗？还是我想念其他东西？

See the example with grid-template-rows: auto on Codepen

.grid-wrapper {
    display: grid;
    grid-template-columns: [start] repeat(2, 1fr) [left] 1fr [half] 1fr [right] repeat(2, 1fr) [end];
    grid-template-rows: repeat(4, 1fr);
    grid-gap: 30px;
}

.grid-item {
    min-height: 100px;
    background: #f3f3f3;
    grid-column: span 2;
    grid-row: auto;
}

screenshot chrome vs ff

谢谢！

Answer 1

此属性为您提供空间

grid-gap：30px;

删除并尝试

chrome中针对网格模板行的意外CSS网格行为

1 个答案: