Question

当网格项目的大小不同时，我试图让网格换行。当高度改变时，网格应该换行，而不是宽度。

这是解决方案的一个示例，但是使用flexbox实现。上下调整窗口高度，您将看到.block2向左包裹（重要）

我的主要要求是：

.block-wrapper是对的
.block1是可变高度
.block2具有静态高度
包装纸和2个方块的宽度为350像素。
各个方向的块之间的空间为15px
.block2在高度溢出时包裹在.block1的左侧。

正如您所看到的，Flexbox实现失败了＃5。我无法在margin-left: 15px上放置.block1因为这会使.block-wrapper宽度为365px，而规则＃4将会失败。 .block-wrapper宽度应该只有350px或700px（包裹时）。.block-wrapper有一个margin-left: 15px b / c，还有其他未提及的元素。

现在已经不在了，我想尝试使用css网格的解决方案。 auto-fit似乎是包装网格的唯一方法，但我无法使其正常工作。

这是我尝试过的网格的代码笔：

https://codepen.io/guanzo/pen/JpPJVM?editors=1100

＆＃13;

*{
  box-sizing: border-box;
}
html,body{
  height: 100%;
 margin: 0;
}
.container{
  border: 1px solid black;
  width: 90%;
  height: 90%;
  display:flex;
  justify-content: flex-end;
}
.block-wrapper{
  display: grid;
  grid-gap: 15px;
  grid-template-rows: repeat(auto-fit, auto);
}
.block1{
  border: 2px solid darkgreen;
  width: 350px;
}
.block2{
  border: 2px solid darkred;
  width: 350px;
  height: 250px;
}

＆＃13;

<div class="container">
  <div class="block-wrapper">
    <div class="block1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies eros id purus imperdiet mattis. Donec id lacus bibendum, luctus felis ac, commodo dolor. Donec suscipit venenatis nisi quis pharetra. Curabitur tincidunt ullamcorper eleifend. Aenean in diam est. Nulla a fringilla mauris. Curabitur in odio est. Fusce orci lorem, condimentum vitae mattis sit amet, malesuada ac libero. Praesent et massa risus. Donec mattis sem at enim aliquam, non eleifend risus ullamcorper. In sed nibh nulla.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies eros id purus imperdiet mattis. Donec id lacus bibendum, luctus felis ac, commodo dolor. Donec suscipit venenatis nisi quis pharetra. Curabitur tincidunt ullamcorper eleifend. Aenean in diam est. Nulla a fringilla mauris. Curabitur in odio est. Fusce orci lorem, condimentum vitae mattis sit amet, malesuada ac libero. Praesent et massa risus. Donec mattis sem at enim aliquam, non eleifend risus ullamcorper. In sed nibh nulla.</div>
    <div class="block2"></div>
  </div>
<div>

＆＃13;

我需要grid-template-rows: repeat(auto-fit, auto);这样的内容，但这是一条无效的规则。

我还接受修复我的flexbox解决方案并遵守所有规则的解决方案。

CSS Grid包含可变大小的内容

0 个答案: