我可以垂直偏移CSS网格单元格中的元素吗?

dfuffjeb  于 2023-05-19  发布在  其他
关注(0)|答案(2)|浏览(123)

使用此代码:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

可以在这里看到和运行:https://www.w3schools.com/css/tryit.asp?filename=trycss_grid
有没有可能在div元素中添加一个css样式(或者通过其他方式),使其中一个数字垂直偏移15个像素。
具体地说,将中心单元格中的5垂直偏移15个像素?
(If所附的图像工程,然后我已经模仿了我的意思)。
谢谢


Picture

8ehkhllq

8ehkhllq1#

只需使用nth-childpseudo class选择第5个元素并调整该元素的填充。请参见下面的标记代码。

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.grid-item:nth-child(5) {
  padding-bottom: 35px;
  padding-top: 5px;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
qyyhg6bp

qyyhg6bp2#

当然,您可以自由地将大多数CSS规则应用于网格子元素。
您可以为想要偏移的特定元素添加单独的类,即grid-item__offset,以及底部填充为15px的规则:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.grid-item__offset {
  padding: 0 0 15px;
 }
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item grid-item__offset">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

相关问题