Блог

У меня есть 4 разделы, и на обычном экране компьютера они находятся рядом друг с другом со следующим кодом.

 .parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.div1 { 
  grid-area: 1 / 1 / 2 / 2; 
}

.div2 {
  grid-area: 1 / 2 / 2 / 3;
}

.div3 {
  grid-area: 1 / 3 / 2 / 4; 
}

.div4 {
  grid-area: 1 / 4 / 2 / 5;
}  

 <div class="parent">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
</div>  

Когда я просматриваю это на своем смартфоне, все 4 divs будет отображаться в 1 строке.
Как я могу отобразить 2 divs в 1 row ? Таким образом, конечный результат будет 2 rows у 2 divs каждого на смартфоне.

измените эту строку: grid-template-columns: repeat(4, 1fr); на: grid-template-columns: repeat(2, 1fr); тогда у вас будет только 2 столбца в строке.

затем измените эту строку: grid-template-rows: 1fr; на: grid-auto-rows: auto; чтобы автоматически вставлять столько строк, сколько необходимо, и увеличивать их до максимального содержимого.

и последнее, но не менее важное: удалите css для всех div-блоков, поскольку они в любом случае бесполезны в этом случае. Также это не так, как есть, или должно использоваться.

используйте медиа-запросы для настройки дизайна для разных размеров экрана, как показано в примере ниже:

@media запустите медиа-запрос. при only screen этом вы определяете, что в качестве правила следует использовать только размер экрана. and (max-width: 480px) определяет правило, которое будет применяться для мобильных экранов (наибольшая ширина 480 пикселей для портретного режима).

 .parent {
  display: grid;
  grid-auto-rows: auto;
  grid-gap: 0px;
}

@media only screen
  and (max-width: 480px) {
    .parent {
      grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen
  and (min-width: 481px) {
    .parent {
      grid-template-columns: repeat(4, 1fr);
    }
}  

 <div class="parent">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
</div>  

Вы можете использовать @media screen для создания пользовательских CSS для разных размеров экрана.

@media screen используется для указания разного макета для разных размеров экрана.

Вы можете найти руководство здесь:

 https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
  

В этом руководстве также приведены примеры, из которых вы получите представление о том, как @media screen объединить вещи.