网格未堆叠在移动设备上

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;没有意义。您需要使用display: grid;来使用网格属性。

第三，为什么使用没有href的链接标签a。如果你不想要链接，只想要一个块，那么使用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>