мобильный адаптив таблицы на grid

Question

Есть табличка, построенная на grid. Подскажите пожалуйста, как я могу её адаптировать под мобильные экраны? auto-fill не совсем то, что нужно. Он просто переносит блоки вниз, по аналогии с flex wrap. С table это сделать проще. Но как на grid, я не знаю. Помогите, пожалуйста.

.table {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 1px;
}

.table_unit {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #FAFAFA;
    padding: 20px 20px 20px 20px;
}

.table_content {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #F0F6F8;
    padding: 20px 20px 20px 20px;
}

<div class="table">


                    <div class="table_unit">
                        <p>This is text</p>
                    </div>
                    <div class="table_unit">
                        <p>This is text</p>
                    </div>
                    <div class="table_unit">
                        <p>This is text</p>
                    </div>
                    <div class="table_unit">
                        <p>This is text</p>
                    </div>
                    <div class="table_unit">
                        <p>This is text</p>
                    </div>

                    <div class="table_content">
                        <p>Simple text</p>
                    </div>
                    <div class="table_content">
                        <p></p>
                    </div>
                    <div class="table_content">
                        <p>Simple text</p>
                    </div>
                    <div class="table_content">
                        <p>Simple text</p>
                    </div>
                    <div class="table_content">
                        <p></p>
                    </div>

                    <div class="table_content">
                        <p>Simple text</p>
                    </div>
                    <div class="table_content">
                        <p>Simple text</p>
                    </div>
                    <div class="table_content">
                        <p>Simple text</p>
                    </div>
                    <div class="table_content">
                        <p>Simple text</p>
                    </div>
                    <div class="table_content">
                        <input type="submit" class="log_button_replace" value="Simple button">
                    </div>


</div>

Answer 1

Вы не написали как Конкретно нужно адаптировать для мобильные экраны. Вот один из вариантов (сузьте экран не более 480рх):

.table {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 1px;
}

.table_unit {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #FAFAFA;
  padding: 20px 20px 20px 20px;
}

.table_content {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #F0F6F8;
  padding: 20px 20px 20px 20px;
}

@media screen and (max-width: 480px) {
  .table {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-gap: 1px;
  }
}

<div class="table">


  <div class="table_unit">
    <p>This is text</p>
  </div>
  <div class="table_unit">
    <p>This is text</p>
  </div>
  <div class="table_unit">
    <p>This is text</p>
  </div>
  <div class="table_unit">
    <p>This is text</p>
  </div>
  <div class="table_unit">
    <p>This is text</p>
  </div>

  <div class="table_content">
    <p>Simple text</p>
  </div>
  <div class="table_content">
    <p></p>
  </div>
  <div class="table_content">
    <p>Simple text</p>
  </div>
  <div class="table_content">
    <p>Simple text</p>
  </div>
  <div class="table_content">
    <p></p>
  </div>

  <div class="table_content">
    <p>Simple text</p>
  </div>
  <div class="table_content">
    <p>Simple text</p>
  </div>
  <div class="table_content">
    <p>Simple text</p>
  </div>
  <div class="table_content">
    <p>Simple text</p>
  </div>
  <div class="table_content">
    <input type="submit" class="log_button_replace" value="Simple button">
  </div>


</div>

БЛОГ НА HUSL

мобильный адаптив таблицы на grid

Ответы (1 шт):