共享同一行和列时将网格项目设置为不重叠

Posted 2023-03-06

【中文标题】共享同一行和列时将网格项目设置为不重叠

【英文标题】：Setting grid items to not Overlap when sharing the same row and column

【发布时间】：2018-10-03 02:39:33

【问题描述】：

现在，当两个网格项共享相同的行和列时，它们会相互重叠。

<div class="some-grid-container">
    <div style="grid-row: 1; grid-column: 1">Item 1</div>
    <div style="grid-row: 1; grid-column: 1">Item 2</div>
</div>

我怎样才能让它们不重叠？共享同一行和列时，可能表现得像弹性项目。 （不制作外容器）。

【问题讨论】：

您能解释一下为什么要将 Items 放到一个网格元素中吗？我没有看到任何用例。也许 CSS 网格有一种不同的方式来实现你想要做的事情。实际问题的答案是“不，你不能在没有外部容器且没有重叠的情况下将它们放在同一个地方”。 CSS 网格是为了准确放置一个容器来填充特定区域。

我实际上正在使用 Angular 并执行一个 for 循环，其中网格容器中的行和列将是相同的。我将无法在这个特定循环中使用外部容器。我想如果我将它们设置为相同的行和列并且如果我不使用包装器，它们真的会重叠。韦尔普。但是，非常感谢您的回答。

您想将这些项目合并到一个字段中吗？如果您告诉我们目标行为，我们可能会帮助您。您希望多个项目（文本？！）在一个字段中？如果是，您希望将它们分别放在单独的容器中吗？你为什么不从角度发布整个for循环并要求呢？ :)

@jdickel：一个用例将有一个 5 列的 x 轴（周一 - 周五），在 y 轴上有时间（上午 9 点至下午 5 点）。周一有两节课：(1) 游泳@周一上午 9 点至上午 11 点。 (2) 空手道 @ 周一上午 9 点至上午 11 点。现在，如果您将两个课程都放在星期一列中，他们将不会相互了解并重叠。他想要的是定位的网格项目是内容感知的，并且在设置在同一位置时不会重叠。不幸的是，我不认为电网足够聪明。如果 subgrid 得到广泛支持，我认为我们将能够轻松完成此任务。

我得到了您的描述，但这与网格无关。 html 和 CSS 都是与内容相关的，因为它们都是标记和设计语言。他们不能满足于意识到任何事情。要设计这样的东西，你需要用 JS 或类似的东西编写一些类管理。

【参考方案1】：

您的语法不正确。 内联样式不使用那些大括号“”、“”。 此外，您需要在第二列中指定“项目 2”。如果您使用同一行和同一列，那么两个 div 肯定在同一个位置。

试试……

CSS：

.some-grid-container
  display: grid;
  grid-template-columns: auto;

HTML：

<div class="some-grid-container">
    <div style="grid-row: 1; grid-column: 1;">Item 1</div>
    <div style="grid-row: 1; grid-column: 2;">Item 2</div>
</div>

这应该会创建一个 100% 宽度的网格，其中包含 2 个相同大小的列。

【讨论】：

我在问即使在使用类似的网格行和网格列时，是否有某种方法可以使项目不重叠。将列更改为其他数字不是我的选择之一。我还更改了我的问题，使其不使用 。

您为什么要这样做？ @jlawcordova

还有，你有没有让物品互相推开？

【参考方案2】：

将物品包装在容器中。

例子：

.some-grid-container 
  display: grid;
  grid-template-columns: 100px 100px;


.some-grid-container>div 
  grid-column: 1;
  grid-row: 1;


.some-grid-container>div>div 
  background: red;

<div class="some-grid-container">
  <div>
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
</div>