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

2023-08-01前端开发问题

本文介绍了CSS Grid:使用 grid-column-start/end 时的自动调整行为类似于自动填充的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

当谈到 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.

这显然不是你需要的.

这篇关于CSS Grid:使用 grid-column-start/end 时的自动调整行为类似于自动填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

The End

相关推荐

layui 单选框、复选框、下拉菜单不显示问题如何解决？

layui tree树组件怎么自定义添加图标

layui要如何改变时间日历布局大小？

CoffeeScript 总是以匿名函数返回

getFullYear 在一年的第一天返回前一年

如何制作 TextGeometry 多线?如何将它放在一个正方形内，以便它像 html 文本一样包裹在 div 内?

热门文章

热门精品源码

最新VIP资源