html - 如何在元素之间添加垂直间距在移动视图上？

Question

目前，我有一个<div>响应式的。

宽屏显示：

手机展示：

如何在移动显示屏上的 2 行之间添加垂直间距？我尝试为每个元素添加边距，但是，我不希望第二行有margin-bottom.

我的代码如下：

HTML

<div class="stats-flexwrap">
    <div class="stats">
        <span class="stats-row"><span>element 1</span>
        <span class="stats-row"><span>element 2</span>
        <span class="stats-row"><span>element 3</span>
        <span class="stats-row"><span>element 4</span>
     </div>
 </div>

CSS

.stats-row {
    text-align: center;
    margin: 0 16px;
}

.stats {
    width: auto;
    display: flex;
}

@media screen and (max-width: 788px) {
    .stats {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
        margin: 0;
        height: auto;
    }
    
    .stats-row {
        margin: 0 16px 0 16px !important;
        width: 120px;
    }
}

.stats-flexwrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

标签： htmlcssflexbox

Answer 1

您可以使用gap网格内的间距：

gap: 25px;

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>