前两个单元格的动态 CSS 网格答案

【问题标题】：Dynamic CSS Grid for first two cells前两个单元格的动态 CSS 网格
【发布时间】：2021-02-24 15:11:32
【问题描述】：

我目前设置了一个动态 CSS 网格，其中第一个单元格宽度始终分布在列数上。相反，我希望前两个单元格在第一行中以 50/50 的比例拆分，其余的单元格是动态的（除非只有一列，在这种情况下，所有单元格都像通常的列一样显示）。不知道如何实现。

我的网格父代码：

.grid {
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

以及网格中第一个单元格的代码：

.grid > :first-child {
    grid-column: 1 / -1;
}

因此，理想情况下，前两个单元格在第一行中以 50/50 的比例分割，然后根据屏幕大小自动填充其余单元格：

【问题讨论】：

您可以使用 grid-area 或 grid-template-areas。
是否总是相同的列数？如果，使用 6 列的模板，将前两列跨越 3，其他列跨越 2。如果数字列可能发生变化，您将需要 javascript 来重置前 2 个 onload 和调整大小事件的跨越值。
@G-Cyrillus 是的，这就是问题所在，它们会自动适应屏幕的大小，所以可能有 1 列或 5 列，理想情况下我想要某种 @987654325 @style 代码，但那是不可能的

标签： css css-grid

【解决方案1】：

不是最好的解决方案，但我最终做的是将我想要展示的元素（即图中的顶部两个框）包装在一个 div 中，然后按如下方式对其进行样式设置：

.grid .featured {
    display: flex;
    gap: 2rem;
}

.grid .featured>div {
    width: calc(50% - 1rem); //Only fill 50% of div, minus half of the gap defined above
}

然后我添加了几个媒体查询，当低于某个宽度时，或者当网格减少到单列时

@media only screen and (max-width : 963px) {
    .grid .featured {
        display: contents !important; //Not sure why contents works, but it does
    }

    .grid .featured>div {
        width: auto !important;
    }
}

【讨论】：