CSS Grid中等宽列
我希望使用CSS Grid让下面的HTML在行元素(row element)有两个、三个或更多子元素(child elements)的情况下，显示为n列等宽列数。Flexbox可以很容易地实现这一点，但我无法通过CSS Grid实现 - 欢迎任何帮助。<div class="row"&g...
CSS Grid中每行后面的边框
我正在尝试使用CSS网格使每一行产生一个border-bottom，并将内容居中对齐。 我无法理解。 我希望.line可以填充整个.wrapper容器的宽度。 我该如何实现？ 以下是代码： * { box-sizing: border-box; } .outer { ...
使用 position: fixed 的响应式 CSS 网格布局
我正在使用CSS Grid Layout（还在学习）构建响应式模板，并且多亏了这里的一些人，我已经完成了大部分工作。 移动设备 (最大宽度: 767px) 所有内容都应该显示在自己的行上 平板电脑 (最小宽度: 768px) 导航栏在第一行 侧边栏和主要内容在第二行 台式机 (最小...
使用CSS Grid设置列的最小和最大数量
我有10个div（64px x 64px），我想在最多5列中显示它们（适用于大型和超大型视口），并且最少3列（适用于小视口，例如iPhone 7等）。我正在尝试使用CSS Grid来实现此目标，但无法实现最小列数部分（即使有空间容纳3列，它也会变为2列）。 body { backg...
Chrome中的CSS Grid布局似乎在超过1000行时无法正常工作。
我使用“CSS Grid Layout”和“sticky position”技术创建了一个带有固定标题的滑动网格的示例。为了方便，网格的内容是由一个脚本生成的，我认为这个脚本很好用。 function fillGrid(selector, rows) { let cols = 3;...
CSS网格单元格的不同高度
我如何让“content”和“right”块响应式地上移？问题是我不能使用嵌套子网格。我不需要任何Hack：因为标题可以具有不同的高度，所以不使用 margin-top。不使用 JavaScript，仅使用纯CSS。如果可能的话。 现在我的标记看起来像这样： .wrapper { ...
在CSS Grid中使用隐式行与负整数
我正在尝试使用简单的侧边栏布局和平面HTML结构，其中第一个<aside>元素完全填充第一列。 我的问题是，负的行结束值似乎无法为第二列中所有元素隐式创建的行起作用。 预期结果： 实际的： 以下是一个可运行的代码片段，用于说明问题。 article { ...
为什么Chrome 80会导致grid-template-rows: auto的问题？
有人知道最新的Chrome 80更新有什么问题吗？看起来像是 grid-template-rows: auto 从现在开始，即使给定的行在标记中不存在，也会占用一些空间。仅发生在Chrome 80+上。 .l-page { display: grid; grid-tem...
CSS响应式网格布局：grid-column span破坏了minmax
我有一个很棒的响应式网格，就像这样： grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 这使得每个网格项至少有200像素的宽度。其中一个项目（红色的）是两倍宽，就像这样： grid-column-end: spa...