Как правильно сбросить grid-template-columns? - PullRequest
Новая
       1

Как правильно сбросить grid-template-columns?

3 голосов
/ 17 июня 2019

У меня есть макет с двумя столбцами в сетке CSS, и я хотел бы переключиться на макет с одним столбцом с разрешением 1024 пикселей. 

.page {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
  grid-column-gap: 5pt;
  grid-row-gap: 5pt;
}

@media (max-width: 1024px){
  .page{
    display: block;
  }
}

Является ли изменение типа дисплея полным решением для отключения grid-template-rows и т. Д., Или они должны быть сброшены явно?

Есть ли какие-то "ошибки" при настройке типов отображения с использованием сетки.

Ответы [ 2 ]

5 голосов
/ 17 июня 2019

Начальное значение grid-template-columns и grid-template-rows равно none.

Таким образом, чтобы сбросить свойства (т. Е. Нет явных созданных дорожек), вы должны переключиться на grid-template-columns: none в своем медиазапросе.

Вы также можете переключиться на grid-template-columns: 1fr, который создает сетку с одним явным столбцом. 

article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100px;
  grid-column-gap: 5pt;
  grid-row-gap: 5pt;
}

section {
  background-color: green;
}

@media (max-width: 600px) {
  article {
    grid-template-columns: 1fr;
    /* OR, change value to 'none' */
  }
  section {
    background-color: orangered;
  }
}
<article>
  <section></section>
  <section></section>
</article>

jsFiddle demo

Спецификация:

0 голосов
/ 23 июня 2019

Самый простой способ сбросить любое свойство CSS до его начального значения - использовать значение initial. Он будет работать с любым свойством, и вам не придется беспокоиться о любых значениях по умолчанию. 

.page {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
  grid-column-gap: 5pt;
  grid-row-gap: 5pt;
}

.item {
  height: 100px;
  background-color: green;
}

@media (max-width: 1024px) {
  .page {
    grid-template-columns: initial;
  }
}
<div class="page">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Но в текущем случае, конечно, 1fr и none тоже будут работать.

...