CSS Grid Layout是一种允许创建网格的W3C技术。它不需要使用浮动,表格,绝对定位甚至flexbox(另一种CSS3技术)来构建各种网格,从简单到复杂。一般情况下,请勿将此标记用于CSS网格系统。
我正在使用 TailwindCSS 来制作一些基于网格的布局。 我有一个有 100 行和 100 列的网格(扩展了默认的顺风配置) 从Tailwind Play中可以看到,最后一个网格的h...
Grid-auto-rows with auto - 如何控制最后一行的高度?
我需要创建一个行数未知的网格容器 - 以便除最后一行之外的所有行都占据内容的高度,而最后一行(无论内容的高度如何)占据...
css 网格表代码 - 我有 2 个元素,我想将其中一个元素放在另一个元素下方
我有 2 个元素,我想将其中一个元素放在另一个元素下面。每列只有 2 个。我如何在CSS中做到这一点,我添加的每个元素都会以这样的方式排列,使其在下面显示2个...
如何在 css 网格之间使用 justify-content 空间
我的整个网站有一个使用 12 列的网格布局 我想要 3 个项目,每个项目占用 3 列,并在它们之间分配重命名空间, 类似于 justify-content: space-
我有一个网格和子网格。这些行包含重复的 [ 包含 []] 对,后跟 []。 我想要每个图像容器的高度(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>
我有一个简单的 css 网格,其中有 X 个网格项。网格项目的数量可以变化,它们的大小也可以变化。我需要创建一个简单的扩展器,因此只有一定数量的行将被 vi...
我试图将“类附加div”放在“类div容器8”之间的某个位置,但没有任何作用,它只是留在容器下。 我让它一起工作......
我正在设计一个简单的水平可滚动网格。要求最多有 2 行。如果单元格适合一行,则应显示一行,否则显示下一行中的剩余项目。这是……
我正在设计一个简单的水平可滚动网格。要求最多有 2 行。如果单元格适合一行,则应显示一行,否则显示下一行中的剩余项目。这是……
我正在尝试使用 CSS 网格布局以下结构,但对实现它的最佳方法感到困惑: 我只是想知道是否有人有建议或一些示例代码......
您必须稍微调整一下屏幕尺寸才能明白我的意思。 假设我有一张卡片,它位于网格行内,该网格行比卡片高。这张卡是100%高度,里面的css g...
你必须稍微调整一下屏幕尺寸才能明白我的意思。 假设我有一张卡片,它位于网格行内,该网格行比卡片高。这张卡是100%高度,里面的css g...
我正在尝试创建一个类似于所附图表的布局。 (左侧为桌面版,右侧为移动版。) 布局应该是响应式的(理想情况下是流畅的,但不是必需的)。 每个图像(由 g...
我在动态生成的发票中有一个CSS网格。我提前知道行数和列数。我还使用模板行和模板列并定义每列的列宽
请帮忙,我不明白如何在标题中正确布局这样的块,有一个容器(1440px没关系),里面有一个徽标压在左侧,如何处理...
我正在为一个大型菜单做一些原型设计,其中菜单项应该“智能”显示,根据菜单项的数量,它们将读取为行或列。 我...
我有一个简单的网格。某些元素(例如 )跨越所有列。是否可以让页脚内的子元素适用于相同的底层网格?没有设置... 我有一个简单的grid。某些元素(例如 <footer>)跨越所有列。是否可以让页脚内的子元素适用于相同的底层网格?没有在父元素上设置完全相同的网格? main { display: grid; grid-template-columns: 1fr 1fr; } footer { grid-column: 1 / -1; /* this gets the footer to span all columns */ } footer { /* can this be avoided? */ display: grid; grid-template-columns: 1fr 1fr; } <main> <footer> <p>some text</p> <p>some more text</p> </footer> </main> subgrid就是答案。 如果[在嵌套网格上]您在 grid-template-columns、grid-template-rows 或两者上设置值子网格,则嵌套网格将使用在父级上定义的轨道,而不是创建列出的新轨道。 main { display: grid; grid-template-columns: 1fr 1fr; } footer { grid-column: 1 / -1; /* this gets the footer to span all columns */ display: grid; grid-template-columns: subgrid; } p { outline: 1px solid green; } <main> <footer> <p>some text</p> <p>some more text</p> </footer> </main>
如图所示,请看红线,正在扩大网格间隙,我想创建像“ABC”/“XYZ”这样的文本,将中心与网格间隙对齐,这可能吗.. .
我做错了什么,css grid 命令没有缩放网格中的项目吗?我一定是误解了 minmax 值的工作原理。 。网格 { 显示:网格; 对齐内容:居中; 我...