css-grid 相关问题

CSS 网格：分数与百分比有什么区别？

分数与百分比有何不同？下面的代码有什么不同吗？ 网格模板列：1fr 1fr 1fr 1fr； 网格模板列：25% 25% 25% 25%； 它们在视觉上看起来...

如何补偿网格列尺寸的间隙？

我认为这是一个常见问题，但仍然找不到答案。请看一下小提琴： 身体 { 保证金：0； } 。网格 { 显示：网格； 网格自动流：列； 网格自动列：...

使用css将第二个div移动到第一个位置

我有一个父div，在父div内我有3个子div。 第一 我有一个父div，在父div内我有3个子div。 <div class="parent"> <div class="child1">First</div> <div class="child2">Second</div> <div class="child3">Third</div> </div> 对于家长，我已经写了下面的样式。 .parent { display: grid; grid-template-columns: 1fr 1fr 1fr; } 期望是 Second First Third 您可以使用 css order 属性： 例如通过放置order: -1，该项目将被放置在开头 下面的工作示例 .parent { display: grid; grid-template-columns: 1fr 1fr 1fr; } .child2 { order: -1 /*Moves it to the first place*/ } <div class="parent"> <div class="child1">First</div> <div class="child2">Second</div> <div class="child3">Third</div> </div> 对子项使用 order 参数： .parent { display: grid; grid-template-columns: 1fr 1fr 1fr; } .child1 { order: 2; } .child2 { order: 1; } .child3 { order: 3; } <div class="parent"> <div class="child1">First</div> <div class="child2">Second</div> <div class="child3">Third</div> </div>

CSS 网格项目上的粘性位置

我在这里查看了其他示例，但找不到可以实现此目的的示例。我希望侧边栏（部分）在页面滚动时保持粘性。位置：如果我把它放在上面，粘性就起作用了...

我可以制作一个具有动态行数或列数的 CSS 网格吗？

我想做的是制作一个具有动态数量的单元格的 CSS 网格。为了简单起见，我们假设每行始终有四个单元格。我可以指定一个具有如此动态麻木的网格吗...

getBoundingClientRect() 给出的是父元素而不是目标元素的尺寸

我对网页设计相当陌生，所以提前道歉。我有一个简单的网站网格布局。其中一个单元格内部是一张带有 object-fit: contains 的图像，以使其具有响应能力。 我正在尝试...

使用带有自动列跨度的CSS子网格

我有以下html结构。 孩子2 我有以下 html 结构。 <div class="grandparent"> <div class="parent"> <div class="achild2">Child 2</div> <div class="achild2">Child 2</div> <div class="achild2">Child 2</div> <div class="achild2">Child 2</div> <div class="achild2">Child 2</div> <div class="achild2">Child 2</div> </div> <div class="achild1">Child 1</div> </div> .parent { display: grid; grid-template-columns: subgrid; grid-column: span 6; background-color: lightblue; padding: 10px; } .grandparent { display: grid; grid-template-columns: repeat(12, 1fr); /* 12 columns */ gap: 10px; background-color: lightgreen; padding: 20px; } .achild1 { background-color: lightpink; height: 50px; padding: 20px; } .achild2 { background-color: lightyellow; height: 50px; border: 2px solid red; padding: 10px; } 达到以下效果 问题是child1的数量是动态的，并且每个可能跨越可变数量的列。因此无法指定 parent SPAN。 我可以在 display: contents 上使用 parent，效果很好。我想知道如何使用 SUBGRID 达到相同的效果 用于实验的 codepen 链接： https://codepen.io/rsun2100/pen/GRebbvJ 您可以修改 .parent 类以利用子网格进行布局。 .parent { display: grid; grid-template-columns: subgrid; /* Use subgrid */ background-color: lightblue; padding: 10px; } .grandparent { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; background-color: lightgreen; padding: 20px; } .achild1 { background-color: lightpink; height: 50px; padding: 20px; } .achild2 { background-color: lightyellow; height: 50px; border: 2px solid red; padding: 10px; } HTML： <div class="grandparent"> <div class="parent"> <div class="achild1">Child 1</div> <div class="achild2">Child 2</div> <div class="achild2">Child 2</div> <div class="achild2">Child 2</div> <div class="achild2">Child 2</div> <div class="achild2">Child 2</div> <div class="achild2">Child 2</div> </div> <!-- Remove the direct child1 div --> </div> 这将允许 .parent 网格使用子网格与 .grandparent 网格的列对齐。

如何使用特定的div来测量Bootstrap的断点？ [已关闭]

Bootstrap 5 能否为可以拖动相互垂直边框的两列提供响应式布局？答案：是的，通过重新配置 Bootstrap 以使用容器查询而不是媒体查询。

如何在列中分解 html 列表，并遵循列方向的字母顺序？

如果我有这样的列表怎么办： a b c d e f &... 如果我有这样的列表怎么办： <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>i</li> </ul> 并且想要这样的渲染： a | e | i b | f | c | g | d | h | 我的意思是，分成几列但尊重“垂直”字母顺序？此外，柱子的“高度”应与可用空间一样高。所以没有像上面那样固定 4 行。也没有固定高度的容器。 可能吗？我知道我可以使用 Flexbox 来做到这一点，但要固定容器的高度。我也查看了网格规格，但不确定是否有可能。 有什么想法吗？ 尝试这样的 CSS 网格： ul { margin: 0; padding: 0; list-style:none; height: 100vh; display: grid; grid-template-rows: repeat(auto-fit, 1.2em); /* define the heoght of one row here */ grid-auto-flow: column; font-size: 50px; } body { margin: 0; } <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>i</li> </ul> 您还可以将 column-count 与 column-fill: auto 一起使用。 这样就可以达到不填写的效果了。 ul.example { column-count: 3; column-rule: 1px solid #dadbe1; column-gap: 3.7rem; column-fill: auto; /*balance*/ column-rule-color: #eaeaf1; column-width: auto; display: inline-block; height: 100vh; /*auto*/ margin: 0; padding: 0; width: 100%; } ul.example li { list-style: none; display: block; position: relative; break-inside: avoid; height: 25vh; } <ul class="example"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>i</li> </ul> 我希望列表项向下传播（而不是向右）。 这对我有用： <style> .example { columns: 3; -webkit-columns: 3; -moz-columns: 3; } </style> <ul class="example"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>i</li> </ul>

无法响应地渲染我的 CSS 网格布局

我正在尝试为国际象棋游戏制作一个网格。 8x8，有 64 个方格。 我希望网格根据屏幕尺寸扩大和缩小。我可以使用基本的 html 和

调整网格大小

所以我有这个网格，我想让它水平调整大小 ... 所以我有这个网格，我想让它水平调整大小 <div id="grid"> <div class="editor-container" id="editor-container"> <!-- Ensure each textarea has a unique ID --> <textarea class="editor" id="htmlEditor"><!--Your initial HTML content here--> <b>Hello World!</b></textarea> <textarea class="editor" id="jsEditor" style="display: none;"><!--Your initial JS content here--></textarea> <textarea class="editor" id="cssEditor" style="display: none;"> body, html { height: 100%; margin: 0; font-family:'Helvetica Neue', sans-serif; } </textarea> </div> <div id="divider"> </div> <div class="output-container"> <iframe id="output"></iframe> </div> </div> 如何调整其大小，以便我可以拖动分隔线并调整其大小并具有响应能力？ 我尝试使用鼠标按下事件，但它仅在向左拖动时才有效，当我向右拖动时，它会断开连接，除非我拖动得很慢 要创建具有可拖动分隔线的可调整大小的网格，您可以使用 JavaScript 和 CSS。这是一个帮助您入门的简化示例： <div id="grid"> <div class="editor-container" id="editor-container"> <!-- Your textareas go here --> </div> <div id="divider"></div> <div class="output-container"> <iframe id="output"></iframe> </div> </div> <style> #grid { display: grid; grid-template-columns: 1fr auto 1fr; /* Three columns with a resizable middle column */ height: 100vh; /* Adjust the height as needed */ } #divider { cursor: ew-resize; /* Set cursor to show resize direction */ background-color: #ddd; width: 10px; height: 100%; } #editor-container, .output-container { overflow: hidden; /* Ensure child elements do not overflow */ } </style> <script> const divider = document.getElementById('divider'); const editorContainer = document.getElementById('editor-container'); let isResizing = false; divider.addEventListener('mousedown', (event) => { isResizing = true; document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', () => { isResizing = false; document.removeEventListener('mousemove', handleMouseMove); }); }); function handleMouseMove(event) { if (isResizing) { const newWidth = event.clientX; editorContainer.style.width = `${newWidth}px`; } } </script> 此示例设置了一个包含三列的网格布局，并在中间列中使用了可调整大小的分隔线。 JavaScript 代码向分隔线添加了 mousedown 事件监听器，当用户拖动时，它会动态调整左列的宽度。您可以根据您的特定需求调整此示例，并根据需要添加更多样式。

Chrome 中的 CSS 子网格错误？

我有一个带有子网格的CSS网格。如果我限制子网格的高度，原始网格的高度不会缩小。这仅适用于 Chrome。 Firefox 和 Safari 按预期工作。 这是我的迷你 Codepen...

第一次使用 CSS 网格并在浏览器上遇到右侧间隙问题

我是 html 和 CSS 新手，想为自己制作一个小网站来展示我的照片。 我有点努力让网格正确，特别是当改变浏览器窗口的纵横比时。 我是

如何在网格框中水平和垂直居中图表项目

我已经花了两个小时，但还没有找到解决方案 我有几个 li 项目，它们一起代表我的 ul 网格容器中的图表 我已经花了两个小时，但还没有找到解决方案 我有几个 li 项目，它们一起代表我的 ul 网格容器中的图表 <ul id="button-cash"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> #button-cash { display: grid; grid-template-columns: 60px 60px 60px 60px; grid-auto-rows: 10vh; align-items: center; justify-items: center; list-style-type: none; width: 100%; height: 300px; } li { width: 35px; height: 30px; background-color: rgb(65, 171, 185); } #price-screen, #button-cash, #cash-in-drawer { background-color: rgb(159, 227, 236); } 我希望这个图表是集中的，所以我尝试将这些属性添加到我的网格框中 align-items: center; justify-items: center; 但我得到了这个结果 图表稍微远离我的容器边缘 所以我认为制作我的网格容器会更聪明 position: relative; 当我将以下 css 添加到我的 li 图表时 position: absolute; top: 50%; bottom: 50%; transform(50%, -50%); 它有效，但我得到了这个结果 所有li在集中时融合成一个元素 我相信这个问题的解决方案非常简单，但我无法找出它是什么 我添加了 justify-content: center 使其居中而不是 justify-items。让我知道这是否是您的意思 #button-cash { display: grid; grid-template-columns: 60px 60px 60px 60px; grid-auto-rows: 10vh; align-items: center; justify-content: center; list-style-type: none; width: 100%; height: 300px; } li { width: 35px; height: 30px; background-color: rgb(65, 171, 185); } #price-screen, #button-cash, #cash-in-drawer { background-color: rgb(159, 227, 236); } <ul id="button-cash"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

在CSS网格中，如何根据有多少列使每列为1/3（最小）和1/2（最大）？

假设我有一个带有 display: grid 的容器。我想确保每列占用以下宽度，具体取决于有多少列： 如果2或更少，每列占1/2....

当最后一行的项目少于n个时如何选择网格容器

我有一个网格容器，每行中的项目数量是固定的。但物品总数未知。有没有办法仅在少于 7 个项目时才选择网格容器...

CSS 网格等大小列

我正在尝试创建 3 个 div，每个 div 包含 1 个 标签，并使用 CSS 网格将所有 3 个 div 分布在同一行上，宽度相等。 大多数消息来源说我应该使用 grid-template-columns 来实现... 我正在尝试创建 3 个 div，每个 div 包含 1 个 标签，并使用 CSS 网格将所有 3 个 div 分布在同一行上，宽度相等。 大多数消息来源说我应该使用 grid-template-columns 来实现这一目标。有人说去1fr 1fr 1fr，有人说repeat(3, 1fr)，还有更多人说repeat(3, auto)。 结果是一样的。这 3 个 div 最终位于同一行，但它们的宽度根据其内容的宽度而变化。有没有办法强制所有 3 个 div 具有相同的宽度，如果内容太宽，只需使用下一行？ 该片段应该显示我所处的情况。 .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); } .content { margin: 2em; } <div class="grid-container"> <div class="content"> <p>TESTTESTTESTTESTTESTTESTTESTTESTTES</p> </div> <div class="content"> <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p> </div> <div class="content"> <p>TESTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p> </div> </div> 你的网格很好 - 内容是这里的问题。 您可以尝试 word-break 或 overflow 作为解决方法： word-break解决方案： .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px dotted green; } .content { margin: 2em; border: 2px solid red; } .content p { word-break: break-word; } <div class="grid-container"> <div class="content"> <p>TESTTESTTESTTESTTESTTESTTESTTESTTES</p> </div> <div class="content"> <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p> </div> <div class="content"> <p>TESTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p> </div> </div> overflow解决方案： .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px dotted green; } .content { margin: 2em; border: 2px solid red; overflow: auto; } <div class="grid-container"> <div class="content"> <p>TESTTESTTESTTESTTESTTESTTESTTESTTES</p> </div> <div class="content"> <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p> </div> <div class="content"> <p>TESTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p> </div> </div> 编辑：显然，word-break: break-word;在 Firefox 中不起作用 - 谢谢，@Yaakov Ainspan。再次提醒您应该在多个浏览器中测试您的代码。可以用word-break: break-all;代替。 @fen1x 的答案很接近，但不完全是。我对此进行了一些实验，发现 word-break: break-all 有效，而 break-word 则无效。 （溢出解决方案有点有效，但不是OP所要求的）。 .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; max-width: 100%; } .content { margin: 2em; word-break: break-all; } <div class="grid-container"> <div class="content"> <p>TESTTESTTESTTESTTESTTESTTESTTESTTES</p> </div> <div class="content"> <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p> </div> <div class="content"> <p>TESTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p> </div> </div> 此外，该解决方案不需要应用于网格项内的各个元素，而是可以直接应用于该项。 尝试： grid-template-columns: repeat(3, minmax(0, 1fr));

如何居中对齐容器父级？

我有一个主网格。它的网格项也是容器（容器类型：内联大小），这有助于根据其宽度为它们提供各种内部布局。 我怎样才能居中对齐主要...

如何折叠CSS网格（不是表格）中的边框

我有这个react-tailwind组件： {/* */}

Flexbox 列中的顶行/项目高度相等[重复]

我有一个列组件，位于柔性包装器内。多个列组件可以并排存在，并且每列包含多个 Flex 项目。 我需要每栏的顶部项目...