css-grid 相关问题

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

CSS 网格项目上的粘性位置

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

回答 3 投票 0

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

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

回答 7 投票 0

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

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

回答 1 投票 0

使用带有自动列跨度的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 网格的列对齐。

回答 1 投票 0

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

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

回答 1 投票 0

如何在列中分解 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>

回答 3 投票 0

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

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

回答 1 投票 0

调整网格大小

所以我有这个网格,我想让它水平调整大小 ... 所以我有这个网格,我想让它水平调整大小 <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 事件监听器,当用户拖动时,它会动态调整左列的宽度。您可以根据您的特定需求调整此示例,并根据需要添加更多样式。

回答 1 投票 0

Chrome 中的 CSS 子网格错误?

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

回答 2 投票 0

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

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

回答 1 投票 0

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

我已经花了两个小时,但还没有找到解决方案 我有几个 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>

回答 1 投票 0

在CSS网格中,如何根据有多少列使每列为1/3(最小)和1/2(最大)?

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

回答 1 投票 0

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

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

回答 1 投票 0

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));

回答 3 投票 0

如何居中对齐容器父级?

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

回答 1 投票 0

如何折叠CSS网格(不是表格)中的边框

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

回答 0 投票 0

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

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

回答 1 投票 0

CSS 网格问题,图标未显示我期望的位置

我正在创建一个小型测验应用程序。它显示了一个问题和几个可供选择的答案,非常标准。每个可能的答案都由 DIV 中的文本表示。当用户选择

回答 1 投票 0

网格不变

我的网格有问题,没有显示我想要的尺寸。我有一个 2×2 网格: L1是产品图片, r1 是新闻通讯注册, R2 是带有浏览全部链接的标题, R2是一款产品...

回答 1 投票 0

CSS网格如何保证中间列居中?

我有三栏;中间有一个主柱,两侧各有两个。两侧栏的宽度根据其内容而变化 - 其中一栏甚至可能是空的。我想要内容...

回答 2 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.