css-grid 相关问题

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

适合窗口高度的响应式正方形网格

我正在尝试创建响应式正方形网格（3x3，然后 5x5）。下面的代码正确地创建了一个正方形网格，该网格随着窗口缩小而变小。但是，我想限制我的...

html css css-grid

回答 1 投票 0

将CSS网格行高设置为剩余视口高度

一些背景给定一个覆盖整个视口的 2x5 css 网格，定义为： #grid-wrapper { 显示：网格；网格模板列：50% 50%；网格模板行：50px 50px 50px calc(100vh - 200px) 50...

css css-grid

回答 1 投票 0

如何在多个div上设置滚动条，但不是所有div

狙击在哪里？我想仅在身体部位设置滚动条。不是 rheader 和 cheader。如果我设置溢出：滚动；对于 body div，每个 body div 上有单独的滚动条。这不是我想要的。一个滚动条...

html css css-grid

回答 1 投票 0

当使用“aspect-ratio: 1”使单元格成为正方形时，由正方形组成的 3 x 3 CSS 网格会溢出到容器之外

我的目标是创建一个由正方形组成的 3 x 3 网格，它可以根据内容的大小进行调整，有角号，并且其文本内容垂直和水平居中。几小时后...

html css css-grid

回答 1 投票 0

使用 CSS 网格或 Flexbox 将未知数量的项目分布到 2 列中

我的容器中有未知数量的子项目：第 1 项项目... 我的容器中有未知数量的子项目： <div class="container"> <div class="child">Item 1</div> <div class="child">Item 2</div> <div class="child">Item 3</div> <div class="child">Item 4</div> <div class="child">Item 5…</div> </div> 我想将这些项目堆叠成两列，以便它们出现： Item 1 Item 4 Item 2 Item 5 Item 3 在不知道网格行数的情况下，我无法弄清楚如何使用 CSS 网格来实现此操作，或者在没有在容器上设置显式高度的情况下使用 Flexbox 来实现此操作。有人可以建议一种方法吗？如果有使用 Flexbox 和网格的义务，那么据我所知，你需要容器的高度（使用 JavaScript 或你提到的 CSS 自定义属性动态计算它）。我可以想到一种纯粹在 CSS 中实现此目的的方法，无需任何动态计算或提前知道高度，那就是使用 column-count 属性。有了这个，您无需担心传入的项目数量。如果您正在寻找 Flexbox 或网格之外的解决方案，请在此处分享我的解决方案以供参考： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { column-count: 2; /* speciifes that the content inside the container should be divided into two columns */ column-gap: 1rem; width: 100%; } .child { display: inline-block; width: 100%; box-sizing: border-box; break-inside: avoid; /* ensures that each child element stays within a single column */ padding: 0.5rem; } </style> </head> <body> <div class="container"> <div class="child">Item 1</div> <div class="child">Item 2</div> <div class="child">Item 3</div> <div class="child">Item 4</div> <div class="child">Item 5</div> <div class="child">Item 6</div> <div class="child">Item 7</div> <div class="child">Item 8</div> <div class="child">Item 9</div> <div class="child">Item 10</div> <div class="child">Item 11</div> <div class="child">Item 12</div> <div class="child">Item 13</div> <div class="child">So on...</div> </div> </body> </html> 试试这个： const container = document.getElementById('container'); let itemCount = 0; addEventListener('click', function() { itemCount++; const newItem = document.createElement('div'); newItem.className = 'child'; newItem.textContent = 'Item ' + itemCount; container.appendChild(newItem); }); .container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; /* Add spacing between items */ } .child { padding: 10px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="w.css"> </head> <body> <div class="container"> <div class="child">Item 1</div> <div class="child">Item 2</div> <div class="child">Item 3</div> <div class="child">Item 4</div> <div class="child">Item 5</div> <div class="child">Item 5</div> <div class="child">Item 5</div> <div class="child">Item 5</div> <div class="child">Item 5</div> <div class="child">Item 5</div> <div class="child">Item 5</div> <div class="child">Item 5</div> <div class="child">Item 5</div> </div> <script src="w.js"></script> </body> </html> 但我也会使用Javascript

css flexbox css-grid

回答 2 投票 0

让列在 CSS 网格中换行

使用 display: grid; 时如何指定最大列数，当内容对于空间来说太宽（或小于最小尺寸）时它会自动中断？有没有...

css css-grid

回答 2 投票 0

如何在 HTML 和 CSS 中创建宽度和高度相等的两列布局

我正在尝试创建一个两列布局，其中左侧是一个充满文本的 div，右侧是一个带有图像的 div。它们应该位于容器的中心，并且它们都应该有一个...

html css layout flexbox css-grid

回答 1 投票 0

grid-template-rows动态修改

我有一个具有这种结构的 React 组件工具和 searchPanel 块具有固定高度。主块应占据剩余空间： ... 我有一个具有这种结构的 React 组件工具和 searchPanel 块具有固定高度。主块应占据剩余空间： <div className={`reference-container`}> { isToolsVisible && <div className={`tools`}></div> } { isSeracpPanleVisible && <div className={`searchPanel`}></div> } <div className={`mainContent`}></div> </div> 我有一个样式表文件： .reference-container { $toolHeight: 100px; $serachPanelHeight: 50px; height: 100%; display: grid; grid-template-areas: "tools" "serachPanel" "mainContent"; grid-template-rows: $toolHeight $serachPanelHeight 1fr; .tools { grid-area: tools } .searchPanel { grid-area: searchPanel } .mainContent { grid-area: mainContent } } 根据条件，和会显示。但是，当条件块不存在时，我不确定如何正确更改grid-template-areas。我尝试为父容器设置几个条件修饰符类，并基于它们在CSS文件中动态定义网格模板。 html(JSX) <div className={`reference-container ${isToolsVisible ? 'with-tools' : ''} ${isSearchPanelVisible ? 'with-search-panel' : ''}`}> {isToolsVisible && <div className={`tools`}></div>} {isSearchPanelVisible && <div className={`searchPanel`}></div>} <div className={`mainContent`}></div> </div> SCSS .reference-container { $toolHeight: 100px; $searchPanelHeight: 50px; height: 100%; display: grid; grid-template-rows: 1fr; &.with-tools { grid-template-areas: "tools" "mainContent"; grid-template-rows: $toolHeight 1fr; } &.with-search-panel { grid-template-areas: "searchPanel" "mainContent"; grid-template-rows: $searchPanelHeight 1fr; } .tools { grid-area: tools; } .searchPanel { grid-area: searchPanel; } .mainContent { grid-area: mainContent; } } 我认为这不是正确的解决方案，也许在这种情况下最好不要使用网格？请建议更好的解决方案。先谢谢你了！你做得太复杂了。 HTML 中的元素的顺序与您希望它们显示的顺序相同，您可以让网格流来处理这个问题。只需要将主要内容设置到最后一行即可： .container { display: grid; height: 300px; border: solid 1px black; grid-template-rows: auto auto 1fr; margin: 5px; } .tools { height: 100px; background-color: lightblue; } .search { height: 50px; background-color: lightgreen; } .main { background-color: yellow; height: 100%; grid-row: -2 / -1; } <div class="container"> <div class="tools"></div> <div class="search"></div> <div class="main"></div> </div> <div class="container"> <div class="search"></div> <div class="main"></div> </div> <div class="container"> <div class="tools"></div> <div class="main"></div> </div> <div class="container"> <div class="main"></div> </div>

css sass layout css-grid grid-layout

回答 1 投票 0

是什么导致网格模板行转换出现延迟？

自从我发现可以选择动画高度：auto;通过使用 grid-template-rows，我一直在我认为合适的地方使用它，例如菜单或常见问题解答项目。最近我注意到我...

css css-grid

回答 1 投票 0

为什么我的带有 ASCII 艺术的网格模板区域不起作用？

什么时候网格模板区域： “......标题标题” “侧边栏内容内容”；更改为：网格模板区域： “......标题标题” ...

css ascii css-grid

回答 2 投票 0

浏览器报告“grid-template-areas”的值无效，但验证器说它是正确的

我的css如下：显示：网格；网格模板区域：“a0 b0 c0 d0 e0 f0 b0”“g1 g1 g1 g1 g1 . .” “我2我2我2我2……” “j3 j3 j3 .k3 k3 k3”“l4 l4 m...