Question

我正在使用CSS Grid并在此处找到的codepen中进行了以下布局：https://codepen.io/alexg2195/pen/xLEeMd

我的问题是，在使用repeat(auto-fill, minmax(400px, 1fr));时，我的布局超出了两列。

有没有办法强制使用两列但仍然具有相同的最小自动填充调整大小行为？

＆＃13;

body {
  margin: 40px;
}

.layout {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 100px;
  grid-template-areas: "main btn" "main .";
}

.btn {
  grid-area: btn;
  background-color: #444;
  color: #ddd;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.boxes {
  grid-area: main;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

＆＃13;

<div class="layout">
  <div class="boxes">
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e">E</div>
    <div class="box f">F</div>
    <div class="box g">G</div>
    <div class="box h">H</div>
    <div class="box i">I</div>
    <div class="box j">J</div>
    <div class="box k">K</div>
    <div class="box l">L</div>
    <div class="box m">M</div>
  </div>
  <div class="btn">BTN</div>
</div>

＆＃13;

Answer 1

有没有办法强制使用两列但仍然具有相同的最小自动填充调整大小行为？

不在<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script> <select data-placeholder="Your Favorite Football Team" class="chosen-select" tabindex="5"> <option value=""></option> <optgroup label="NFC EAST"> <option value="Dallas Cowboy">Dallas Cowboys</option> <option value="New York">New York Giants</option> <option value="Philadelphia">Philadelphia Eagles</option> <option value="Washington">Washington Redskins</option> <optgroup> <optgroup label="NFC NORTH"> <option value="Dallas Cowboy">Dallas Cowboys</option> <option value="New York">New York Giants</option> <option value="Philadelphia">Philadelphia Eagles</option> <option value="Washington">Washington Redskins</option> </optgroup> </select> / auto-fill。

这些功能可以容纳最大数量的曲目，而不会使容器溢出。

7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions

当给出auto-fit作为重复次数时，如果是网格   容器在相关轴上具有确定的尺寸或最大尺寸   重复次数是最大可能的正整数   这不会导致网格溢出其网格容器。

为了＆＃34;自动填充＆＃34;每行最多两列，您需要找到另一种方法。

也许是flexbox？

revised demo

＆＃13;

auto-fill

＆＃13;

body {
  margin: 40px;
}

.layout {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 100px;
  grid-template-areas: "main btn" "main .";
}

.btn {
  grid-area: btn;
  background-color: #444;
  color: #ddd;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.boxes {
  grid-area: main;
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 1 0 40%;
  margin: 5px;
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

div.box.n {
  visibility: hidden;    /* https://stackoverflow.com/q/42176419/3597276 */
  height: 0;
}

＆＃13;

使CSS网格自动填充仅2列

1 个答案: