css-grid 相关问题

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

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

css css-grid

回答 1 投票 0

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>

javascript html css css-grid

回答 1 投票 0

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

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

css css-grid sticky

回答 1 投票 0

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

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

css css-grid multiple-columns

回答 1 投票 0

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

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

css flexbox css-grid

回答 2 投票 0

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

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

css css-grid

回答 1 投票 0

如何在横向和纵向布局上使用 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 flexbox css-grid aspect-ratio

回答 1 投票 0

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

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

css web flexbox css-grid responsive

回答 1 投票 0

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

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

html css css-grid

回答 1 投票 0

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

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