如何创建可折叠的网格？

Question

我正在尝试在这个网站上创建一个网格：

http://projetistamotorsporttop5.com/teste-css/

网格包含图标和旁边的文本，就在注册按钮的下方。

我想通过一个网格来实现这一点，这样我就可以将文本放置在标题下方和图标旁边，这样图标、标题和文本的集合就构成了一个“单元”。以下是我继续实施它的方法：

.grid-container {
    display: inline-grid;
    grid-column-gap: 50px;
    grid-row-gap: 0px;
    grid-template-columns: auto auto auto auto auto auto auto auto auto;
    max-width: 70vw;
    padding-top: 8vh;
    padding-bottom: 0vh;
}
.grid-container > div {
    text-align: left;
    padding-top: 10px;
    padding-bottom: 0px;
}
.item-1 {
    grid-row: 1 / 3;
    grid-column: 1 / 2;
}
.item-2 {
    grid-row: 1 / 1;
    grid-column: 2 / 4;
    color: #fff;
    font-family: 'Rajdhani';
    font-size: 175%;
}
.item-3 {
    grid-row: 1 / 3;
    grid-column: 4 / 5;
}
.item-4 {
    grid-row: 1 / 1;
    grid-column: 5 / 7;
    color: #fff;
    font-family: 'Rajdhani';
    font-size: 175%;
}
.item-5 {
    grid-row: 1 / 3;
    grid-column: 7 / 8;
}
.item-6 {
    grid-row: 1 / 1;
    grid-column: 8 / 10;
    color: #fff;
    font-family: 'Rajdhani';
    font-size: 175%;
}
.item-7 {
    grid-row: 2 / 2;
    grid-column: 2 / 4;
    color: #fff;
    font-family: 'Rajdhani';
    font-size: 100%;
    padding: 0px;
}
.item-8 {
    grid-row: 2 / 2;
    grid-column: 5 / 7;
    color: #fff;
    font-family: 'Rajdhani';
    font-size: 100%;
    padding: 0px;
}
.item-9 {
    grid-row: 2 / 2;
    grid-column: 8 / 10;
    color: #fff;
    font-family: 'Rajdhani';
    font-size: 100%;
    padding: 0px;
}
.laranja {
    background: #f79510;
    display: inline;
}

<div class="grid-container">
    <div class="item-1"><img src="lock.png" width=80></div>
    <div class="item-2">100% Safe purchase</div>
    <div class="item-7">Your data are protected and your purchase is safe.</div>
    <div class="item-3"><img src="Lightining.png" width=80></div>
    <div class="item-4">Imediate access</div>
    <div class="item-8">All lectures available upon enrollment confirmation.</div>
    <div class="item-5"><img src="Garantia.png" width=160></div>
    <div class="item-6">15 day warranty</div>
    <div class="item-9">You can ask for a full refund during this period.</div>
</div>

当我全屏查看它时效果很好，就像在笔记本电脑中一样，但我希望它具有响应性，这样当用户调整屏幕大小或在智能手机上查看页面时，“单位（图标 + 标题 + text)" 显示在彼此下方，而不是并排显示。我实现这个的方式，它显示为一个水平表格，它不会在较小的屏幕上折叠。

题目是第2、4、6课的题目，课文是第7、8、9课的题目。有什么实现方法的想法吗？我曾尝试更改.grid-container 类的显示属性，但没有成功。

Answer 1

我已经删除了所有与解决方案无关的样式。

我使用了一个附加类来模拟移动视图。当然，您应该使用媒体查询或类似方法来处理此问题。

.grid-container {
  display: inline-grid;
  grid-column-gap: 50px;
  grid-row-gap: 0px;
  grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
  max-width: 70vw;
  padding-top: 8vh;
  padding-bottom: 0vh;
  grid-auto-flow: row dense;
}

.grid-container>div {
  text-align: left;
  padding-top: 10px;
  padding-bottom: 0px;
}

.item-7 {
  grid-column: 2;
}

.item-8 {
  grid-column: 4;
}

.item-9 {
  grid-column: 6;
}

.grid-container.mobile {
   width: 250px;
  grid-template-columns: 1fr 2fr;
  background-color: lightblue;
}

.mobile .item-1, .mobile .item-3, .mobile .item-5 {
  grid-row: span 2;
}

.mobile .item-8 {
  grid-column: unset;
}

.mobile .item-9 {
  grid-column: unset;
}

<div class="grid-container">
  <div class="item-1">lock.png</div>
  <div class="item-2">100% Safe purchase</div>
  <div class="item-7">Your data are protected and your purchase is safe.</div>
  <div class="item-3">Lightining.png</div>
  <div class="item-4">Imediate access</div>
  <div class="item-8">All lectures available upon enrollment confirmation.</div>
  <div class="item-5">Garantia.png</div>
  <div class="item-6">15 day warranty</div>
  <div class="item-9">You can ask for a full refund during this period.</div>
</div>

<div class="grid-container mobile">
  <div class="item-1">lock.png</div>
  <div class="item-2">100% Safe purchase</div>
  <div class="item-7">Your data are protected and your purchase is safe.</div>
  <div class="item-3">Lightining.png</div>
  <div class="item-4">Imediate access</div>
  <div class="item-8">All lectures available upon enrollment confirmation.</div>
  <div class="item-5">Garantia.png</div>
  <div class="item-6">15 day warranty</div>
  <div class="item-9">You can ask for a full refund during this period.</div>
</div>