css-grid 相关问题

你能帮我让这个网格布局工作吗？列长度相等，但一列可以任意长

有人可以帮我用 CSS Grid 设计这个布局吗？ 理论上，红色盒子应该可以想多长就多长。绿色盒子应保持相互堆叠。 红框和绿框...

移动设备上的 CSS 网格布局和预格式化

我尝试将一个相当简单的网站移动到网格布局。 HTML 看起来像这样： ... ... ......

CSS 网格中行/单元格的“自身高度”

所以，看看下面的 HTML 代码，我的问题是我有一个由 CMS 管理员管理的元素填充的 CSS 网格，即他们可以向该网格添加元素并设置每个元素的宽度

使CSS网格中的空单元格可点击

我有一个像这样的网格结构（用于每周日历）： {/* 水平线 */} 我有一个像这样的网格结构（用于每周日历）： <div className="grid flex-auto grid-cols-1 grid-rows-1"> {/* Horizontal lines */} <div className="col-start-1 col-end-2 row-start-1 grid divide-y divide-gray-100" style={{ gridTemplateRows: 'repeat(48, minmax(3.5rem, 1fr))' }} > <div className="sticky left-0 z-20 -ml-14 -mt-2.5 w-14 pr-2 text-right text-xs leading-5 text-gray-400"> 12AM </div> <div /> <div className="sticky left-0 z-20 -ml-14 -mt-2.5 w-14 pr-2 text-right text-xs leading-5 text-gray-400"> 1AM </div> {/* More rows here like this for 24 hours */} </div> {/* Vertical lines */} <div className="col-start-1 col-end-2 row-start-1 hidden grid-cols-7 grid-rows-1 divide-x divide-gray-100 sm:grid sm:grid-cols-7"> <div className="col-start-1 row-span-full" /> <div className="col-start-2 row-span-full" /> <div className="col-start-3 row-span-full" /> <div className="col-start-4 row-span-full" /> <div className="col-start-5 row-span-full" /> <div className="col-start-6 row-span-full" /> <div className="col-start-7 row-span-full" /> <div className="col-start-8 row-span-full w-8" /> </div> <Events events={params.events} /> </div> 我正在尝试添加一个单击事件，该事件将捕获我在网格中单击的位置（这样我就知道时间和日期），并且这将打开一个对话框以进行进一步操作。 如果我将事件添加到特定时间，那么我不知道星期几，如果我将事件添加到星期几，我不知道时间。 关于如何捕获这两个 onClick 有什么想法吗？ 添加了 Codepen：https://codepen.io/eventslooped/pen/KKbbpBw 要捕获您单击的网格，请向网格元素添加 onClick 事件。在handleGridClick函数中，我们可以使用 event.clientX 和 event.clientY 属性来获取点击坐标，通过它你可以得到你点击的相应网格。 handleGridClick(event) { const gridOffsetX = 0; const gridOffsetY = 0; const columnWidth = 100; // width of each column const rowHeight = 40; // height of each row const clickX = event.clientX; const clickY = event.clientY; const gridColumn = Math.floor((clickX - gridOffsetX) / columnWidth) + 1; const gridRow = Math.floor((clickY - gridOffsetY) / rowHeight) + 1; console.log(` gridColumn: ${gridColumn}, gridRow: ${gridRow}`); } <div className="grid flex-auto grid-cols-1 grid-rows-1" onClick={this.handleGridClick}> ... </div>

我怎样才能确保我的网格永远不会小于它的子网格

我使用网格布局在 z 方向堆叠元素。由于某种原因，如果其中一个子元素非常宽，它可能会伸出网格元素： #z-堆栈{ 显示：网格；

弹性盒/网格布局中最后一个边距/填充折叠

我有一个项目列表，我正在尝试使用 Flexbox 将其排列成可滚动的水平布局。 容器中的每个项目都有左右边距，但是最后一个项目的右边距是...

如何像 Flexbox 一样使网格中的列“空间均匀”？

我有这个网格 CSS 。网格 { 显示：网格； 网格列间隙：50px； 网格模板列：重复（3，1fr）； } 它位于宽度为 500px 的 div 中 但我注意到第一个项目...

如何使网格模板行与网格模板列具有相同的长度？

.容器{ 显示：网格； // 我希望最小值与列相同 25% 网格模板行：重复（17，minmax（这里有什么？，35vh））； // 25% 宽度的列 网格模板列...

移动设备上的CSS网格全宽列

我使用 CSS 网格显示 2 列（50% 灰色/50% 黑色）。你看看它的样子 我想让它们在移动设备上全宽，这样灰色将在第一行，黑色将在第二行......

与 CSS 网格和 CSS 模块的代码和智能感知相比

我正在使用 VS 代码进行一个使用 CSS 网格和 CSS 模块的项目。但是当我尝试这样的事情时 .loginRegisterDiv { 组成：loginDiv； 边距：0 像素； 宽度：100%； } 我收到错误...

如何设置基于flex或grid的动态网格

我正在摸索如何使用 CSS 创建这个特定的动态网格。我一直在尝试使用 CSS 网格，但我很好奇是否应该使用 Flexbox。 我正在附上所需的调整...

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

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

如何使用 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 网格布局创建砖石布局。网格中的所有项目都有可变的高度。下一行中的项目应堆叠到上一行中的项目的可用空间。我试过了