Responsive CSS grid

Знаеш ли, че можеш да постигнеш напълно адаптивен и флуиден грид без употребата на media queries? Ето как да го постигнеш.

Започваме с HTML-a, като в него може да имаш колкото item елементи искаш:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Магията създаваме с една простичка CSS формула, като преди това задаваме display: grid; на контейнера:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

Какво се случва тук? Използвайки функцията repeat подаваме първо auto-fit на целият грид, а след това с minmax определяме каква да бъде ширината на всяка от колоните в грида. По този начин динамично ще изчисляваме ширината на браузъра и на тази база ще позиционираме толкова колони (item елементи), колкото може да побере. При най-ниска ширина ще разширим колоните на 100%.

Тествай CodePen-a с преоразмеряване на браузъра, за да видиш какво имам предвид 😉