CSS 特定列的网格布局更改宽度 class

Question

.grid {
  display: grid;
  grid-template-columns: 80% 20%;
}

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item-special"></div>
  <div class="grid-item-special"></div>
</div>

到目前为止，上面的内容很简单，每行将包含两列，宽度分别为 80% 和 20%

但是我希望对上面的内容进行调整以使其响应。在较小的屏幕上，任何带有 class“grid-item”的 div 将占据 100% 的宽度（因此每行将包含一列）

以上不是问题，但除此之外，我希望任何 div 和 class “grid item-special” 占据宽度的 50%。

图片显示了我试图完成的事情：

我需要尽可能避免更改 html 标记。

欢迎任何想法。

Answer 1

您可以在较小的屏幕上创建媒体查询和更改网格

.grid {
  display: grid;
  grid-template-columns: 80% 20%;
  text-align: center;
}
.grid-item, .grid-item-special{
  border: 1px solid black;
}
@media (max-width: 400px) {
  .grid {
    grid-template-columns: auto;
  }
  .grid-item {
    grid-column: span 2;
  }
  
}

<div class="grid">
    <div class="grid-item">11</div>
    <div class="grid-item">11</div>
    <div class="grid-item-special">22</div>
    <div class="grid-item-special">22</div>
</div>

CSS 特定列的网格布局更改宽度 class

CSS Grid layout change width of specific columns with class

css

css-grid