在小屏幕上垂直布局一些网格列

Question

我有一个看起来像这样的表格：

我已经使用 CSS 网格对其进行了布局：

<div style="display: inline-grid; grid-template-columns: auto auto auto auto">
  <div><input></div>
  <div><input></div>
  <div><input></div>
  <div style="font-family: sans-serif; font-weight: bold; font-size: 20px; line-height: 20px;">⊖</div>
  <div><input></div>
  <div><input></div>
  <div><input></div>
  <div style="font-family: sans-serif; font-weight: bold; font-size: 20px; line-height: 20px;">⊖</div>
  <div><input></div>
  <div><input></div>
  <div><input></div>
  <div style="font-family: sans-serif; font-weight: bold; font-size: 20px; line-height: 20px;">⊖</div>
</div>

在小屏幕上，我希望布局更改为：

但我不知道如何更改 CSS 网格以获得此布局，如果可能的话。

Answer 1

简单地让那些有

<div>

的

<input>

跨越3列，那些没有跨越3行并确保网格尽可能密集：

#container {
  grid-auto-flow: dense;
}

@media (max-width: 768px) {
  #container > :not(:nth-child(4n)) {
    grid-column: 1 / -2;
  }
  #container > :nth-child(4n) {
    grid-column-start: 4;
    grid-row-end: span 3;
  }
}

试试看：

#container {
  display: inline-grid;
  grid-template-columns: repeat(4, auto);
  grid-auto-flow: dense;
}

#container > :nth-child(4n) {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 20px;
  line-height: 20px;
}

@media (max-width: 768px) {
  #container > :not(:nth-child(4n)) {
    grid-column: 1 / -2;
  }
  #container > :nth-child(4n) {
    grid-column-start: 4;
    grid-row-end: span 3;
  }
}

<div id="container">
  <div><input></div>
  <div><input></div>
  <div><input></div>
  <div>⊖</div>
  <div><input></div>
  <div><input></div>
  <div><input></div>
  <div>⊖</div>
  <div><input></div>
  <div><input></div>
  <div><input></div>
  <div>⊖</div>
</div>