我有一個表格，其中一行是標(biāo)簽，多行是通過映射創(chuàng)建的條目。當(dāng)容器變窄時，我想重新配置圖中的行。我在react中使用樣式化的組件，代碼如下所示:

<Wrapper>
    <span>label 1</span>
    <span style={{ gridColumn: "2 / -2" }}>label 2</span>
    <span>label 3</span>
    {values.map(( value, i ) => (
        <SignalRow key={i}>
            <div>Item 1</div>
            <div>Item 2</div>
            <div>Item 3</div>
            <div>Item 4</div>
            <div>Item 5</div>
            <div>Item 6</div>
            <div>Item 7</div>
            <div>Item 8</div>
        </SignalRow>))}
</Wrapper>

const Grid = styled.div`
    display: grid;
    grid-template-columns: minmax(22%,1fr) 30px 4fr 50px 30px 4fr 50px  minmax(22%,1fr);
`;
const Wrapper = styled( Grid )`
    background-color: white;
`;
const SignalRow = styled( Grid )`
    grid-column: 1 / -1;
`;

你認(rèn)為僅僅明智地使用css網(wǎng)格就能實現(xiàn)我想要的嗎？

作為起點，我已經(jīng)給出了一個基本示例，將媒體查詢與網(wǎng)格-列和網(wǎng)格-行結(jié)合起來:

.table {
  max-width: 600px;
  overflow-x: auto;
  display: grid;
  grid-gap: 2px;
}

.tr {
  display: grid;
  grid-gap: 2px;
  min-width: 1px;
  min-width: 320px;
}

.th,
.td {
  padding: 10px;
  min-width: 1px;
  overflow: hidden;
}

.th {
  background-color: gray;
}

.td {
  background-color: red;
}

.tr:nth-child(even) .td {
  background-color: green;
}

@media (min-width: 480px) {
  .tr {
    grid-template-columns: repeat(16, 1fr);
  }
  
  .th:nth-child(1),
  .th:nth-child(3) {
    grid-column: span 3;
  }
  .th:nth-child(2) {
    grid-column: span 10;
  }

  .td:nth-child(1),
  .td:nth-child(3),
  .td:nth-child(6),
  .td:nth-child(8) {
    grid-column: span 3;
  }
}

@media (max-width: 479px) {
  .tr {
    grid-template-columns: repeat(9, 1fr);
  }

  .th:nth-child(1),
  .th:nth-child(3) {
    grid-column: span 2;
  }
  .th:nth-child(2) {
    grid-column: span 5;
  }

  .td:nth-child(1),
  .td:nth-child(5) {
    grid-row: span 2;
    grid-column: span 2;
  }

  .td:nth-child(3),
  .td:nth-child(7) {
    grid-column: span 3;
  }
}

<div class="table">
  <div class="tr">
    <div class="th">1</div>
    <div class="th">2</div>
    <div class="th">3</div>
  </div>
  <div class="tr">
    <div class="td">1</div>
    <div class="td">2</div>
    <div class="td">3</div>
    <div class="td">4</div>
    <div class="td">5</div>
    <div class="td">6</div>
    <div class="td">7</div>
    <div class="td">8</div>
  </div>
  <div class="tr">
    <div class="td">1</div>
    <div class="td">2</div>
    <div class="td">3</div>
    <div class="td">4</div>
    <div class="td">5</div>
    <div class="td">6</div>
    <div class="td">7</div>
    <div class="td">8</div>
  </div>
</div>