具有最少列和行以适应屏幕的 CSS 网格答案

【问题标题】：CSS grid with fewest columns and rows to fit on screen具有最少列和行以适应屏幕的 CSS 网格
【发布时间】：2021-01-01 15:48:37
【问题描述】：

我希望我的网格能够响应视图大小和项目数。它应该使用浏览器窗口（100vh 100vw）可以容纳的最少列和行来分散项目。

目前我有这个与 css 网格：

|-------|   |-----------|   |--------------------|   |--------------------|   |--------------------| 
| [] [] |   |[] [] [] []|   |[] [] [] [] [] [] []|   |[] [] [] [] [] [] []|   |[] [] [] [] [] [] []|
| [] [] |   |[] [] [] []|   |[] []               |   |[] []               |   |[] []               |
| [] [] |   |[]         |   |                    |   |                    |   |--------------------|
| [] [] |   |           |   |                    |   |--------------------|
| []    |   |           |   |                    |        
|-------|   |-----------|   |--------------------|

我想要这个（列和行在可用屏幕尺寸上均匀分布，并且只有在无法适应时才显示垂直滚动条）：

|-------|   |-----------|   |--------------------|   |--------------------|   |--------------------| 
| [] [] |   |  []   []  |   |   []    []    []   |   |   []    []    []   |   | []  []  []  []  [] |
| [] [] |   |  []   []  |   |                    |   |   []    []    []   |   | []  []  []  []     |
| [] [] |   |  []   []  |   |   []    []    []   |   |   []    []    []   |   |--------------------|
| [] [] |   |  []   []  |   |                    |   |--------------------|
| []    |   |  []       |   |   []    []    []   |   
|-------|   |-----------|   |--------------------|

我试图用媒体查询来破解一些东西，但这很乏味。有自动的方法吗？

.switch-panel {
    overflow-y: auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    min-height: 100vh;
    width: 100vw;
}

.switch {
   height: 116px;
   width: 116px;
}

/* Mobile-first: Tablet and larger */

@media all and (min-width: 700px) {

    /* minimum 3 columns */

    .switch-panel {
        grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media all and (min-height: 419px) {

    /* minimum 2 rows */

    .switch-panel {
        grid-template-rows: 1fr 1fr auto;
    }

}

/* Mobile-first: Desktop and larger */

@media all and (min-width: 960px) {

    /* minimum 4 columns */

    .switch-panel {
        grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media all and (min-height: 767px) {
    /* minimum 3 rows */

    .switch-panel {
        grid-template-rows: 1fr 1fr 1fr auto;
    }

}

请在此处尝试我的示例代码： https://jsfiddle.net/vj9n7r4w/1/

【问题讨论】：

虽然这可能是一个很大程度上是理论上的问题（如果是这样，这些问题在这里不一定做得很好，因为我们更多的是为实际的现实问题提供答案，无论它们可能是多么抽象当提交给 Stack Overflow) 时，您能否发布一些最小的 HTML，我们可以应用您的 CSS 并重现您的问题？
添加了 jsfiddle，感谢收看。

标签： html css responsive-design css-grid

【解决方案1】：

CSS 网格可以灵活且自适应，无需使用媒体查询。像这样的东西应该工作。将高度设置为您想要的任何值。

body {
display: grid;
height: 400px;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

您可以从谷歌查看http://1linelayouts.glitch.me/ 以获得一些快速、简单的网格指南。

【讨论】：

您的建议基本上是我已经拥有的。它正在最小化行数，而不是列数。
"肯定有..." - 我很好奇。 :)