定义一个 css 列宽为屏幕宽度最大值的网格

Question

我正在尝试使用网格布局创建水平旋转木马，但我在定义列宽与屏幕宽度完全相同的网格时遇到了困难。

我已经使用下面的代码定义了一个网格，但是它不起作用

  display: grid; grid-template-columns: 1fr; grid-auto-flow: column;

Answer 1

您可以使用视口宽度设置的网格自动列。

每列将采用该宽度，并且列数与图像（轮播中的元素）一样多。

这是一个简单的演示：

.container {
  display: grid;
  grid-auto-columns: 100vw;
  grid-auto-flow: column;
}
.container div {
  height: 50vh;
}

<div class="container">
  <div style="background: red;">1</div>
  <div style="background: green;">2</div>
  <div style="background: blue;">3</div>
</div>

定义一个 css 列宽为屏幕宽度最大值的网格

Define a css grid that has column width is max of screen width

css

grid