css-grid 相关问题

当剩余列为空时，网格列跨度将采用全宽

我正在开发一个日历元素，其中当天的事件利用网格行跨越其指定的时间范围。 然而，在设置事件宽度时我似乎遇到了困难。通过

如何使用 CSS 控制元素的环绕以形成 L 形？ [已关闭]

如何实现将元素包装成容器内的 L 形？这些元素沿着左侧向下放置。随着容器高度的缩小，需要水平放置更多的物品...

CSS 网格单元格中表格的滚动问题

我对 html/css 比较陌生，因为我职业生涯的大部分时间都花在 WPF 桌面应用程序上。我已经开始提供一些应用程序的网络版本，并且一直在享受学习的乐趣...

Tailwind CSS 列在移动设备中没有响应

我正在使用 Tailwind CSS，对此完全陌生。我的页面中有 3 列，当测试平板电脑或移动设备时，这些列相互折叠并出现水平滚动。我想要

如何使 CSS 网格项目像 Flexbox 项目一样匹配父级的高度

我有这个简单的设置： 一些长文本在这里... 我有这个简单的设置： <div class="grid-container"> <div class="grid-child-1"> <div class="content"> some long text<br/> here in the child number<br/> 2 some long text<br/> here in the child number 2 some<br/> long text here<br/> in the child number some long<br/> text here in the child number 2 some long<br/> text here in the<br/> child number 2 some long<br/> text here in the child number<br/> 2 ывавыа ваss<br/> text here in the<br/> child number 2 some long<br/> text here in the child number<br/> 2 ывавыа ваss<br/> </div> </div> <div class="grid-child-2">some text</div> </div> 及款式： </style> .grid-container { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid; width: 100%; height: 200px; } </style> 通过此设置，grid-child-1 项目会超出父级的 200px 高度： 如何让它只拉伸到父母的高度。类似于弹性盒： 您可以在模板中定义行高： grid-template: 100% / 1fr 1fr; 代替 grid-template-columns: 1fr 1fr; .grid-container { display: grid; grid-template: 100% / 1fr 1fr; border: 1px solid; width: 100%; height: 200px; } .grid-child-1 { background-color: red; } <div class="grid-container"> <div class="grid-child-1"> <div class="content"> some long text<br/> here in the child number<br/> 2 some long text<br/> here in the child number 2 some<br/> long text here<br/> in the child number some long<br/> text here in the child number 2 some long<br/> text here in the<br/> child number 2 some long<br/> text here in the child number<br/> 2 ывавыа ваss<br/> text here in the<br/> child number 2 some long<br/> text here in the child number<br/> 2 ывавыа ваss<br/> </div> </div> <div class="grid-child-2">TEST</div> </div>

自定义 CSS 干扰引导网格系统

我的 CSS 选择器 .row > div 中的 >div 部分遇到问题。它似乎导致我的网格系统实现出现错误。我该如何解决这个错误，原因是什么......

如何在两个宽度或跨全宽度之间制作CSS网格项？

我正在将 x 数量的网格项放入网格容器中。但对于这个例子，我们假设有两个网格项。 每个网格项应在 300px-600px 之间，取最大值并缩小到最小值...

这个网格可以通过 Flexbox 或 CSS 网格实现吗？

是否可以在不更改 HTML 的情况下使用 Flexbox 或 css 网格获取此网格？ 1 2 3<... 是否可以在不更改 HTML 的情况下使用 Flexbox 或 css 网格获取此网格？ <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> 我知道可以通过包装 Flex 或网格容器来完成，但我真的希望根本不更改 HTML。此外，项目数量可能会更多，因此需要一种在不知道项目数量的情况下完成此操作的方法。 谢谢 回答你的问题 - 是的，这是可能的： .container { display: grid; grid-template: repeat(4, 80px) / 80px 1fr; grid-gap: 8px; } .container div { border:solid 1px blue; } .container div:nth-child(2) { grid-row: span 4; } <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>

CSS 网格具有可变高度，使其像砖石布局一样工作

我正在尝试使用 css 网格布局创建砖石布局。网格中的所有项目都有可变的高度。下一行中的项目应堆叠到上一行中的项目的可用空间。我试过了

两列网格中左列第一个文本正下方的按钮

如何将按钮直接放置在第一列第一段的下方？我知道这是由于第二段较长造成的，但我想避免出现间隙。 因为我想要 b...

CSS 网格如何在无需更改 grid-template-columns 的情况下切换子级可见性

给出以下布局： 给出以下布局： <div id="grid" style="display: grid; grid-template-columns: min-content auto; width: 100px; height: 100px; border: 1px solid #ccc;"> <div id="first" style="width: 20px; background-color: green;"> </div> <div style="background-color: cyan;"> </div> </div> 我想切换“第一个”子级的可见性，以便第二个子级将占据剩余空间。 网格似乎通过将隐藏的列定义重新分配给下一个可见的列定义来做了一件愚蠢的事情，因此在隐藏第一个子级之后，就网格布局看到的情况和它固有的使用而言，第二个子级成为“第一个” “汽车”。由于子 child 中没有内容，因此它不会显示任何内容。我希望网格模板列能够坚持，无论实际的列可见性如何。 如果孩子被物理地从网格中移除，后者将完全有权这样做，但我只是改变可见性。 在我看来，需要管理这种场景的网格模板列会产生完全不必要的开销，如果人们可以分享他们的想法，我将不胜感激。 我知道某些布局（例如使用 repeat(...) 的布局）可能不会遇到此问题，但我正在寻找针对我的场景的修复方法。 您可以将 grid-column: span 2; 赋予一个元素，使其占用自己的空间 + 接收 display: none; 的元素的空间： .grid { display: grid; grid-template-columns: min-content auto; width: 100px; height: 100px; border: 1px solid #ccc; } .one { width: 20px; background-color: green; } .grid:hover .one { display: none; } .grid:hover .one + .two { grid-column: span 2; } .two { background-color: cyan; } <div class="grid"> <div class="one"></div> <div class="two"></div> </div>

如何使网格容器的一侧在滚动时粘在网页上

我正在制作一个网页，我使用 CSS 网格将内容分成两个并排的容器。但是，网格容器的一侧是导航栏，我希望将其固定到

如何防止两个跨度的 div 使单个列更宽？

我在网格中有一个两列布局，我希望各列具有所需的宽度。 当我有两列时，这有效。 但是当我添加一个跨越两列的 div 时， 最小的列是因为...

“display: grid”是否有与“justify-content: end”等效的东西？

我想将网格项向右对齐，因此左侧空间将是空的，但似乎没有属性可以实现这一点。 。容器 { 边框：1px 纯黑； 宽度：40...

CSS 网格，空行仍然会增加间隙

我有一个CSS网格，有时并不是所有的元素都被使用。在实际用例中，我使用网格作为输入小部件，其中可能有额外的帮助文本或错误放入特定的网格中......

如何在横向和纵向布局上使用 CSS 网格中的宽高比来保持宽高比

我使用 Grid 和 Flexbox 布局了以下元素： 标题 我使用 Grid 和 Flexbox 布局了以下元素： <div class="container"> <div class="inner"> <h2>Title</h2> <div class="square"></div> </div> <div class="inner"> <h2>Title</h2> <div class="square"></div> </div> <div class="inner"> <h2>Title</h2> <div class="square"></div> </div> <div class="inner"> <h2>Title</h2> <div class="square"></div> </div> </div> 我希望将 .inner 元素布置在 2×2 网格中，并且 .square 元素保持纵横比为 1。 到目前为止我有以下CSS： .container { width: 100vw; height: 100vh; background: lightblue; display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; } .inner { background: lightpink; display: flex; flex-direction: column; align-items: center; } .square { background: lightgreen; aspect-ratio: 1; flex-grow: 1; } 当视口的宽度大于高度（例如横向）时，此方法效果很好： 但是当高度大于宽度时（例如纵向），正方形会重叠： 我可以通过将 align-items: center; 中的 .inner 更改为 align-items: self 来解决纵向问题，但这会破坏横向布局。 有什么方法可以让它在两者上都工作吗？ CodePen 在这里：https://codepen.io/danielgibbsnz/pen/KKbWoWL（只需将窗口大小调整为纵向即可看到问题）。 注意： 我理想地希望使用 aspect-ratio 来完成此操作，而不是诉诸填充黑客（如果可能的话）。 这样的东西效果会更好吗？ （注意：它涉及正方形的随机宽度，所以可能不是你想要的。） body { margin: 0; } .container { width: 100vw; min-height: 100vh; background: lightblue; display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr; gap: 20px; } .inner { background: lightpink; display: grid; place-items: center; } .square { background: lightgreen; aspect-ratio: 1; width: 70%; } <div class="container"> <div class="inner"> <h2>Title</h2> <div class="square"></div> </div> <div class="inner"> <h2>Title</h2> <div class="square"></div> </div> <div class="inner"> <h2>Title</h2> <div class="square"></div> </div> <div class="inner"> <h2>Title</h2> <div class="square"></div> </div> </div>

如何阻止 CSS 网格单元因文本内容而扩展？

所以我附上了一张屏幕截图，我希望我的内容单元格的高度停止扩展超过 600 像素，因为屏幕缩小时的文本会导致奇怪的设计视图。相反，我想要...

我如何使用CSS复制这个网格？

所以我试图用 grid-auto-flow: column; 复制这个网格。但我没能实现它。 问题#1：容器应该是水平滚动的，因为它可以有更多选项 问题#2：

如何在 CSS 中使 Flex 容器内的网格响应，而不破坏外部 Flex 容器的布局？

我正在尝试使用网格显示柔性显示器内的项目列表（这是反应中主应用程序的内部组件）。我能够正确显示，但网格溢出到

制作一个拖动条来调整 CSS 网格内的 div 大小

我有 2 个盒子和一个垂直的 div 线，位于一个独特的容器 div 中（代码和小提琴如下）。 我使用 CSS 网格将元素放置在容器内 我想要完成的是使用...