CSS Grid:使用 grid-column-start/end 时的自动调整行为类似于自动填充

2022-01-18 00:00:00 grid css css-grid

当谈到 CSS Grid 时，我遇到了一些困惑.我将网格模板列设置为自动调整，效果很好.除了在 div5 上设置 column-start/end 之外，我开始获得自动填充行为，而不是在创建多个空白单元格的地方.似乎我的 minmax 函数的 max 1fr 没有发挥作用.

I'm running into some confusion when it comes to CSS Grid. I have the grid-template-columns set to auto-fit and that works perfectly fine. Except as soon as I set column-start/end on div5, I start getting auto-fill behavior instead where multiple blank cells are being created. It seems like the max 1fr of my minmax function isn't doing it's job.

我在这里遗漏了什么明显的东西吗?

Am I missing something obvious here?

body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

#div5 {
  grid-column-start: 1;
  grid-column-end: -1;
}

下面的图像显示了增加/减小显示自动填充行为的窗口大小.

Images below show increasing/decreasing window size that shows auto-fill behavior.

根据要求添加了代码片段您必须确保以全屏模式运行它并水平增加屏幕尺寸才能看到问题.

Added Code Snippet as per request You have to make sure you run it in full screen and increase the screen size horizontally to see the issue.

/* Div Styles */
#div1 { background: yellow     }
#div2 { background: dodgerblue }
#div3 { background: tomato     }
#div4 { background: limegreen  }
#div5 { background: yellow     }


/* Body Style */
body { margin: 0; }


/* Grid Settings */
body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: minmax(200px, 1fr);
}

#div5 {
  grid-column-start: 1;
  grid-column-end: -1;
}

<!DOCTYPE HTML>
<html>

<body>
  <div id="div1">Div 1</div>
  <div id="div2">Div 2</div>
  <div id="div3">Div 3</div>
  <div id="div4">Div 4</div>
  <div id="div5">Div 5</div>
</body>

</html>

推荐答案

您希望前 4 项始终填充第一行，最后一项始终填充第二行.

You want the first 4 items always to fill the first row and the last item always to fill the second row.

这意味着您需要一个 4 列网格，其中最后一项跨越所有 4 列.

This means that you want a 4-column grid with the final item spanning all 4 columns. 

body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

#div5 {
  grid-column-start: 1;
  grid-column-end: -1;
}


/* Div Styles */
#div1 { background: yellow     }
#div2 { background: dodgerblue }
#div3 { background: tomato     }
#div4 { background: limegreen  }
#div5 { background: aqua     }


/* Body Style */
body { margin: 0; }


/* Grid Settings */
body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: minmax(200px, 1fr);
}

#div5 {
  grid-column-start: 1;
  grid-column-end: -1;
}

  <div id="div1">Div 1</div>
  <div id="div2">Div 2</div>
  <div id="div3">Div 3</div>
  <div id="div4">Div 4</div>
  <div id="div5">Div 5</div>

原代码的问题:

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

是它使用了 auto-fit，它适用于列数不固定的响应式布局网格，而是网格根据网格内容和布局方法生成新列.

is that it uses auto-fit which is meant for responsive layout grids where the amount of columns isn't fixed but rather the grid makes new columns based on the grid content and layout method.

这显然不是你需要的.

相关文章