Question

对于CSS Grid，我遇到了一些困惑。我将网格模板列设置为自动调整，并且完美无缺。除了我在div5上设置column-start / end之外，我开始获得自动填充行为，而不是创建多个空白单元格。似乎我的minmax功能的最大1fr没有做它的工作。

我错过了一些明显的东西吗？

body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 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: 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>

Answer 1

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

这意味着您需要一个4列网格，最终项目跨越所有4列。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

原始代码的问题：

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

是它使用auto-fit用于响应式布局网格，其中列的数量不固定，而是网格根据网格内容和布局方法创建新列。

这显然不是你所需要的。

CSS网格：使用grid-column-start / end时，自动调整的行为类似于自动填充

1 个答案: