Question

嗨，我正在学习css网格，但我无法承担这个结果。我使用span-row-3类与grid-row：span 3; 当我单独使用它时，它就像第1项一样但是当我使用span-col-3时，它就不再像第6项那样有效了

我的网格行是否有任何原因：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 {
  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>

Answer 2

你错过了＆＃34; span-col-3＆＃34;对于item1

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

Answer 3

问题是默认情况下grid-auto-rows设置为auto。

使用auto，网格项的大小为relative to other items in the same track。

Item1与其他项共享两行。

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

因此，他们的auto尺寸不同。

正如another answer中所述，在grid-auto-rows上定义长度可以解决问题。可能还有其他方法。

css grid-row和grid-column

3 个答案: