css 每行放置尽可能多的 div 的网格显示

Question

我希望我的 div 是网格形式，不改变它的大小并且每行或每列没有固定数量的 div，这样它就可以适应不同的分辨率，比如 youtube 主屏幕。

类似于：

我的代码：

.foodlist{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

但是这种方式限制在6列，在我现在的分辨率下可以用，但是不适应宽度较小的分辨率

Answer 1

你可以这样做：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* This is better for small screens, once min() is better supported */
  /* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */
  gap: 1rem;
}

https://css-tricks.com/snippets/css/complete-guide-grid/

css 每行放置尽可能多的 div 的网格显示

css grid display that places as many divs as possible per row

html

css

layout