css-grid 相关问题

CSS Grid Layout是一种允许创建网格的W3C技术。它不需要使用浮动，表格，绝对定位甚至flexbox（另一种CSS3技术）来构建各种网格，从简单到复杂。一般情况下，请勿将此标记用于CSS网格系统。

在 d3 连接中添加多个元素时控制顺序

通过 d3 从添加行到网格布局进行跟进通过以下代码片段，我现在可以将数据添加为网格布局中的行。然而，正如您所看到的，d3 首先添加所有 cell1，然后添加所有 cell2，最后...

javascript html d3.js css-grid

回答 1 投票 0

通过 d3 将行添加到网格布局

我对 d3 相当陌生，所以我认为这是一个新手问题，b/c 我仍然无法理解数据连接。我正在尝试将行添加到网格布局中。每行都表示为带有

javascript html css d3.js css-grid

回答 1 投票 0

为什么第一个网格比其他网格占据更多空间？

我想将文本居中于主体，但侧边栏和主体之间仍然有间隙，我想要侧边栏的特定宽度，我不知道还能做什么，请帮忙。我已经尝试过使用...

css css-grid

回答 1 投票 0

从 CSS 网格中删除子项

我有一个设置为 CSS 网格的表单，但我希望提交按钮始终位于表单的右下角。我见过一些如何强迫孩子进入新行的例子，我

html css css-grid

回答 1 投票 0

当我最小化窗口时，网格的第三列不会转换为网格的第一行

这是我在 Stackoverflow 上的第一篇文章。我是一个完全的初学者，正在观看这个关于“Html/CSS by SuperSimpleDev”的视频。所以我正在克隆 YouTube 主页。

html css css-grid

回答 1 投票 0

CSS 网格模板 rowStart 和 rowEnd 行为

我正在使用 TailwindCSS 来制作一些基于网格的布局。我有一个有 100 行和 100 列的网格（扩展了默认的顺风配置）从Tailwind Play中可以看到，最后一个网格的h...

html css tailwind-css css-grid

回答 1 投票 0

Grid-auto-rows with auto - 如何控制最后一行的高度？

我需要创建一个行数未知的网格容器 - 以便除最后一行之外的所有行都占据内容的高度，而最后一行（无论内容的高度如何）占据...

css css-grid grid-layout

回答 1 投票 0

css 网格表代码 - 我有 2 个元素，我想将其中一个元素放在另一个元素下方

我有 2 个元素，我想将其中一个元素放在另一个元素下面。每列只有 2 个。我如何在CSS中做到这一点，我添加的每个元素都会以这样的方式排列，使其在下面显示2个...

css css-grid

回答 1 投票 0

如何在 css 网格之间使用 justify-content 空间

我的整个网站有一个使用 12 列的网格布局我想要 3 个项目，每个项目占用 3 列，并在它们之间分配重命名空间，类似于 justify-content: space-

html css css-grid

回答 1 投票 0

如何将网格单元的高度设置为等于兄弟的具体高度？

我有一个网格和子网格。这些行包含重复的 [ 包含 []] 对，后跟 []。我想要每个图像容器的高度（class =“frame”... 我有一个网格和子网格。这些行包含重复的 [<div> containing [<img>]] followed by [<p>] 对。我希望每个图像容器（class =“frame”）的高度与其兄弟姐妹<p>高度相匹配，即 img 容器高度 = 同级 p 高度（p 不换行时行高 x1，p 换行时 x2 或更高）。我尝试了div.frame height=100%，但由于某种原因它没有调整图像的大小。我还尝试了另一个线程中发现的技巧：设置 height=0 和 min-height=100%，但这似乎会导致与内容宽度不匹配的列溢出问题。我可以设置一个具体的高度，如 0 或 80px，但如果文本发生变化，它不会缩放。我希望一些框架高度设置可以解决这个问题，但是我不知道。这是我到目前为止所拥有的： HTML * { margin: 0; padding: 0; } body { background-color: tan; color: black; } div.grid { display: grid; grid-template: repeat(2, auto auto) / repeat(4, max-content); } .grid > div.row { grid-column: span 4; display: grid; grid-template-columns: subgrid; background-color: antiquewhite; } .row > div.cell { grid-column: span 2; display: grid; grid-template-columns: subgrid; } .cell > div.frame { max-height: 100%; height: 100%; } .frame > img.icon { max-width: 100%; max-height: 100%; } .cell > p.note { width: min-content; } <div class=grid> <div class="row"> <div class="cell"> <div class="frame"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> </div> <p class="note">Matthew Patel</p> </div> <div class="cell"> <div class="frame"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> </div> <p class="note">Lucas Lee</p> </div> </div> <div class="row"> <div class="cell"> <div class="frame"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> </div> <p class="note">Todd Ingram</p> </div> <div class="cell"> <div class="frame"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> </div> <p class="note">Roxie Richter</p> </div> </div> </div> 我选择了这种布局，因为即使在不同的图像尺寸下，网格似乎也能保持对齐。不管怎样，我就是这样走到这一步的。也许我没理解“100%”？感谢帮助和反馈。我会首先简化你的 HTML 结构，然后更新 CSS，如下所示。 body { background-color: tan; color: black; margin 0; } .grid { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 20px; background-color: antiquewhite; width: fit-content; } .cell { display: grid; grid-template-columns: 1fr 1fr; } img.icon { height: 0; min-height: 100%; } .cell > p.note { width: min-content; } <div class=grid> <div class="cell"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> <p class="note">Matthew Patel</p> </div> <div class="cell"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> <p class="note">Lucas Lee</p> </div> <div class="cell"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> <p class="note">Todd Ingram</p> </div> <div class="cell"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> <p class="note">Roxie Richter</p> </div> </div>

html css css-grid responsive-images subgrid

回答 1 投票 0

网格列长度

我正在尝试渲染带有分页的工作时间表。每页最多应显示 8 列。目前，当剩余数据数...

reactjs tailwind-css css-grid

回答 1 投票 0

动画 grid-auto-rows 属性

我有一个简单的 css 网格，其中有 X 个网格项。网格项目的数量可以变化，它们的大小也可以变化。我需要创建一个简单的扩展器，因此只有一定数量的行将被 vi...

css css-transitions css-grid

回答 1 投票 0

尝试网格中的网格，但我很困惑如何将它放在一起

我试图将“类附加div”放在“类div容器8”之间的某个位置，但没有任何作用，它只是留在容器下。我让它一起工作......