如何实现css网格行和网格列?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (70)

我在CSS网格行中使用类span-3:span 3;当我单独使用它时,它对第1项起类似的作用,但是当我将它与span-ol-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>

提问于
用户回答回答于

问题是你的行没有相同的高度,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>

用户回答回答于

你漏掉了第1项的“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>

扫码关注云+社区

领取腾讯云代金券