网格不堆叠在移动设备上

Question

我有一个 50/50 的网格，我想在移动设备上显示时堆叠（100%，即每行一行）。我发现的类似问题对我没有帮助。

HTML:

<div class="row">
  <a class="col"> <b> COL </b></a>
  <a class="col"> <b> COL </b></a>
</div>

<div class="row">
  <a class="col"> <b> COL </b></a>
  <a class="col"> <b> COL </b></a>
</div>

CSS:

.row {
  display: flex;
  background-color: #FEEED0;
  grid-column-gap: 30px;
  margin-bottom: 0.5%;
}
.col {
  flex: 50%;
  background-color: #FEEED0;
  border: 1px solid black;
  font-size: 25px;
  text-align: center;
  vertical-align: middle;
  line-height: 110px;
  margin-bottom: 1.5%;
}

.row a{
  color: black;
  text-decoration: none;
}

@media screen and (max-height: 650px) {
  .row {display: inline-block;}
}

如何在移动设备上堆叠此网格？

Answer 1

首先，如果你想使用网格，那么使用网格而不是 flexboxes。

其次，display: flex; with grid-column-gap 没有意义。您需要使用 display: grid; 才能使用网格属性。

第三，为什么要用link标签a而不用href。如果你不想要 link 只是一个块，那么使用 div。如果您想要简单的文本行，请使用段落 p.

.grid {
  display: grid;
  grid-auto-rows: auto;
  grid-gap: 30px;
}

.grid div { 
  background-color: #FEEED0;
  border: 1px solid black;
  font-size: 25px;
  text-align: center;
  padding: 5px;
}

@media only screen
  and (max-width: 480px) {
    .grid {
      grid-template-columns: repeat(1, 1fr);
    }
}

@media only screen
  and (min-width: 481px) {
    .grid {
      grid-template-columns: repeat(2, 1fr);
    }
}

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

网格不堆叠在移动设备上

Grid not stacking on mobile

html

css

markup

mobile

layout