基于设备的不同列数

问题描述 投票:1回答:2

我正在尝试根据设备创建不同数量的列。

例如:在移动设备上我想要2-col布局,而在桌面上4-col布局等...>

我已经尝试过弄乱minmax()了,但是无法按照我想要的方式实现,因此,使用minmax()来实现此目标的任何建议。

有人会回答吗?

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
<div class="wrapper">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
</div>

我正在尝试根据设备创建不同数量的列。例如:在移动设备上,我需要2-col布局,而在桌面上,则需要4-col布局等...我试图弄乱minmax(),但是...

html css css-grid
2个回答
0
投票

不确定是否必须使用Media Queries


0
投票

我会使用bootstrap

© www.soinside.com 2019 - 2024. All rights reserved.