<p>Цей приклад показує як працює властивість <code>grid-auto-flow</code>. Спробуйте вимкнути/ввімкнути перемикач, щоб змінити відображення сітки нижче.</p>

<p>У цьому прикладі, ми можемо змінювати розташування елементів у сітці.</p>

<div class="inputs">
  <input id="row" checked name="grid-auto-flow" type="radio"/>
  <label for="row">row</label>
  <message for="row">Алгоритм автоматичного розміщення, щоб заповнити кожен рядок по черзі, додаючи нові рядки за необхідності. </message>
  
  <input id="column" name="grid-auto-flow" type="radio"/>
  <label for="column">column</label>
  <message for="column">Алгоритм автоматичного розміщення, щоб по черзі заповнювати кожен стовпчик, при необхідності додаючи нові стовпці.</message>
  
  <input id="dense" name="grid-auto-flow" type="radio"/>
  <label for="dense">dense</label>
  <message for="dense">Алгоритм автоматичного р​озміщення, який полягає на заповненні пустої клітинки раніше в сітці, якщо пізніше з'являться менші елементи.</message>
</div>

<p id="message">Алгоритм автоматичного розміщення, щоб заповнити кожен рядок по черзі, додаючи нові рядки за необхідності. </p>

<hr>

<div class="box">
  <div>1</div>
  <div class="big">2</div>
  <div class="big">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 4px;
  grid-auto-flow: row;
}

.box > div {
  background-color: tomato;
  color: white;
  font-size: 1.5em;
  padding: 18px;
  width: 20vw;
  text-align: center;
  font-family: monospace;
}

.box > div.big {
  width: 40vw;
  grid-column-end: span 2;
}

message {
  display: none;
}

var $message = $('#message');

$('.inputs').find('input').on('change', function() {
  
  var $messageText = $("message[for='"+$(this).attr('id')+"']")
  $message.text($messageText.text());
  
  $('.box').css('grid-auto-flow', $(this).attr('id'));
  
});