具有最小值和最大值的CSS网格

ykejflvf 于 2023-05-02 发布在其他

关注(0)|答案(1)|浏览(134)

我使用CSS网格创建了网格，如下所示：
示例：https://codepen.io/asdfaaaasdf/pen/wvYJzgJ

.box {
  background: grey;
  margin-right: 5px;
  margin-bottom: 5px;
  height: 50px;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

}

<div class="wrapper">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box">Three</div>
</div>

我需要的是，如果屏幕的宽度缩小，项目应移动到第二行时，项目大小小于最小尺寸。类似地，如果屏幕被扩展，则项目大小应该增加，直到项目大小达到最大宽度。我该怎么做？有没有可能添加min-width和max-width或者类似css grid的东西？

css

来源：https://stackoverflow.com/questions/76091560/css-grid-with-minimum-and-maximum-values

1条答案

按热度按时间

sczxawaw1#

从你的问题，似乎你正在寻找一个盒子，以获得 Package 按屏幕大小。当屏幕有足够的宽度时，它应该回到行中。
你就快找到答案了。我只是在.box类CSS中添加了max-width: 100%;。
以下是解决方案https://codepen.io/abhijeetabnave/pen/eYPvBYa

.box {
  background: grey;
  margin-right: 5px;
  margin-bottom: 5px;
  height: 50px;
  max-width: 100%;
  justify-content: end;
}
.wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-content: end;
}}

<div class="wrapper">
   <div class="box">One</div>
   <div class="box">Two</div>
   <div class="box">Three</div>
</div>

赞(0）回复(0）举报 2023-05-02

我来回答

具有最小值和最大值的CSS网格

1条答案

相关问题

热门标签

最新问答