Адаптивная таблица для телефона и ПК

Question

Есть данная адаптивная таблица для телефона и ПК, из четырех колонок. Все хорошо НО применить CSS не возможно (кроме font-size), так как все сразу ломается. Предложите пожалуйста аналог, НО чтобы работали все стили CSS.

.block {
  display: flex;
  flex-wrap: wrap;
} 

.col {
  width: 25%;
}
    
    
@media(max-width:400px){
    .col{
      width: 50%;
    }
}

<div class="block">
  <div class="col">ПАПЕ</div>
  <div class="col">МАМЕ</div>
  <div class="col">СЫНУ</div>
  <div class="col">ДОЧЕРИ</div>
<div>

Answer 1

В вашем случае я бы посоветовал использовать гриды вместо флекса.

.block {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
  grid-auto-rows: minmax(100px, auto);
}
 
.col {
       border: 1px solid Black;  
}         
    
@media(max-width:400px){

    .wrapper {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       grid-gap: 5px;
       grid-auto-rows: minmax(45px, auto);
    }
}

<div class="block">
  <div class="col">ПАПЕ</div>
  <div class="col">МАМЕ</div>
  <div class="col">СЫНУ</div>
  <div class="col">ДОЧЕРИ</div>
<div>

БЛОГ НА HUSL

Адаптивная таблица для телефона и ПК

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