CSS网格行和网格列

Question

嗨，我正在学习 CSS Grid，但我不理解这个结果。我使用带有 grid-row: span 3; 属性的类名 span-row-3； 当我仅使用它时，它可以像项目1一样正常工作；但当我与 span-col-3 一起使用时，它就像 Item 6 一样无法正常工作。

请问为什么我的 grid-row: span 3; 在这里不能正常工作？

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}
.span-col-3{grid-column: span 3;}

.span-row-3{grid-row: span 3;}
.grid div {
    font-weight: 300;
    font-size: .8rem;
    line-height: 1.2;
    text-align: left;
    position: relative;
    background: #302742;
    border-left: 2px solid #ffffff4d;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-right: 2px solid transparent;
    padding: 2rem 1rem;
    color: #ffffff80;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<div class="grid">
  <div class="span-row-3">Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div class="span-col-3 span-row-3">Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
</div>

- sonia maklouf

Answer 1

一切正常 - 问题在于你的行高不相等。设置 grid-auto-rows 来指定网格行的大小：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 10px;
}

.span-col-3 {
  grid-column: span 3;
}

.span-row-3 {
  grid-row: span 3;
}

.grid div {
  font-weight: 300;
  font-size: .8rem;
  line-height: 1.2;
  text-align: left;
  position: relative;
  background: #302742;
  border-left: 2px solid #ffffff4d;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-right: 2px solid transparent;
  padding: 2rem 1rem;
  color: #ffffff80;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<div class="grid">
  <div class="span-row-3">Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div class="span-col-3 span-row-3">Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
</div>

- fen1x

Answer 2

您漏掉了item1的"span-col-3"。

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}
.span-col-3{grid-column: span 3;}

.span-row-3{grid-row: span 3;}
.grid div {
    font-weight: 300;
    font-size: .8rem;
    line-height: 1.2;
    text-align: left;
    position: relative;
    background: #302742;
    border-left: 2px solid #ffffff4d;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-right: 2px solid transparent;
    padding: 2rem 1rem;
    color: #ffffff80;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
<div class="grid">
  <div class="span-col-3 span-row-3">Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div class="span-col-3 span-row-3">Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
</div>

- Sutters92

Answer 3

问题在于默认情况下，grid-auto-rows 被设置为 auto。

使用 auto，网格项目的大小相对于 同一行中的其他项目 进行调整。

Item1 与其他项目共享两行。

Item6 不与任何其他项目共享行。

因此，它们的 auto 大小不同。

如 另一个答案 中所述，定义 grid-auto-rows 上的长度可以解决问题。可能还有其他方法。

- Michael Benjamin