Search code examples
cssreactjscss-gridstyled-components

transform css grid when container width is narrower

I have a sort of table with one row for the labels and many rows of items created with a mapping. When the container gets narrower I would like to reconfigure the row as in the picture. enter image description here I am using styled components with react and the code looks like this:

<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;
`;

Do you think it is possible to achieve what I want just with a wise use of css grid?

Solution

  • I've given you a basic example for a starting point, combining media queries with grid-column and grid-row:

    .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>