使CSS网格自动填充2列 [英] Make CSS Grid auto-fill only 2 columns

问题描述

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

我的问题是，当使用重复（自动填充，minmax（400px， 1fr））; 我最终得到的布局超出了两列。

有没有办法强制两列，但仍然有相同的分钟自动填充调整行为？

body {margin：40px;} .layout {display：grid; grid-gap：10px; grid-template-columns：1fr 100px; grid-template-areas：main btnmain。;}。btn {grid-area：btn;背景颜色：＃444;颜色：#ddd; border-radius：5px; padding：20px; font-size：150％;}。boxes {grid-area：main;显示：网格; grid-gap：10px; grid-template-columns：repeat（自动填充，minmax（400px，1fr））;}。box {background-color：＃444;颜色：#fff; border-radius：5px; padding：20px; font-size：150％;}

< div class = 布局 > < 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>

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

$ b $

不与自动填充 / 自动填充

这些函数是为了适应最大数量的轨道，而不会溢出容器而构建的。

7.2.2.2。重复填充：自动填充和自动填充
重复

如果自动填充被指定为重复次数，如果网格
容器有一个确定的大小或相关轴的最大大小，则
重复次数是最大可能的正整数
，不会导致网格溢出其网格容器。

为了每行最多自动填充两列，您需要找到另一个方法。

也许flexbox？

修改后的演示

  body {margin：40px;}。layout {display：grid; grid-gap：10px; grid-template-columns：1fr 100px; grid-template-areas：main btnmain。;}。btn {grid-area：btn;背景颜色：＃444;颜色：#ddd; border-radius：5px; padding：20px; font-size：150％;}。boxes {grid-area：main;显示：flex; flex-wrap：wrap;}。box {flex：1 0 40％; margin：5px;背景颜色：＃444;颜色：#fff; border-radius：5px; padding：20px; font-size：150％;} div.box.n {visibility：hidden; / * https://stackoverflow.com/q/42176419/3597276 * / height：0;}  

 < 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 class =box n> N< / div> < / DIV> < div class =btn> BTN< / div>< / div>  

I am using CSS Grid and have made the following layout in the codepen found here: https://codepen.io/alexg2195/pen/xLEeMd

My issue is that when using repeat(auto-fill, minmax(400px, 1fr)); I end up with a layout that goes beyond just two columns.

Is there a way to force two columns but still have the same min auto fill resize behaviors?

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%;
}

<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>

解决方案

Is there a way to force two columns but still have the same min auto fill resize behaviors?

Not with auto-fill / auto-fit.

These functions are built to fit the largest number of tracks without overflowing the container.

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

When auto-fill is given as the repetition number, if the grid container has a definite size or max size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container.

In order to "auto-fill" a maximum of two columns per row, you'll need to find another method.

Maybe flexbox?

revised demo

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;
}

<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 class="box n">N</div>
  </div>
  <div class="btn">BTN</div>
</div>

这篇关于使CSS网格自动填充2列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！