使用网格布局时列重叠

Question

我在CSS中使用grid布局，我的目标是使图像，文本，输入字段和按钮彼此相邻，如下图所示跨两行：

我为图像赋予了grid-column的{​​{1}}属性，使其仅在第一列中，所有其他元素都具有1 / 1，因此它们位于第二列中列。

我要面对的问题是第二列与第一列重叠，如以下代码片段所示：

2 / 2

.profile {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 20px;
}

img {
  border-radius: 50%;
  height: 100%;
  margin-right: 2%;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.profile>*:not(img) {
  grid-column: 2 / 3;
}

.sameline {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Answer 1

您要做的就是增加grid-column-gap。这使它们不重叠。更改样式以适合您的需求。

.profile {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 100px;
}

img {
  border-radius: 50%;
  height: 100%;
  margin-right: 2%;
  grid-column: 1 / 1;
  grid-row: 1 / 2;
}

.profile>*:not(img) {
  grid-column: 2 / 2;
}

.sameline {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

<div class="profile">
    <img src="https://image.ibb.co/nr3C7T/pic.png">
    <div class="sameline">
      <h2>Title</h2>
      <button>Click</button>
    </div>
    <form method="post">
      <input type="text" style="width:100%;">
    </form>
  </div>

希望这会有所帮助。

Answer 2

我不确定我是否正确理解了您的问题，但是我认为您的意思是第二行的第二列是重叠的。

在这种情况下未正确使用grid-row属性。此属性适用于网格线。因此，第一个值用于指定项目从哪条网格线开始，第二个值指定项目应从哪条网格线结束。因此，在您的情况下，您说它应该从网格线1开始（因此基本上是网格的顶部边界），并且应该从网格线2（这是两列之间的网格线）结束。

您真正想要的是使图像从网格线1开始并在网格线3结束，以使其覆盖两行。相同的规则适用于grid-column属性。

.profile {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 100px;
}

img {
  border-radius: 50%;
  height: 100%;
  margin-right: 2%;
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.profile>*:not(img) {
  grid-column: 2 / 3;
}

.sameline {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

<div class="profile">
    <img src="https://image.ibb.co/nr3C7T/pic.png">
    <div class="sameline">
      <h2>Title</h2>
      <button>Click</button>
    </div>
    <form method="post">
      <input type="text">
    </form>
  </div>