css 网格行和网格列

Question

您好，我正在学习 css 网格，但我无法理解这个结果。我使用类 span-row-3 和 grid-row: span 3;当我单独使用它时，它就像第 1 项一样工作但是当我将它与 span-col-3 一起使用时，它不再像第 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>

Answer 1

一切正常 - 问题是您的行的高度不相等。设置grid-auto-rows来指定grid-row的大小:

.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>