Процентный столбец / диапазон строк

Question

Мне интересно, есть ли способ использовать процентные значения для grid-column и / или grid-row.

Например:

.grid {
  display: grid;
  box-sizing: border-box;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 24px;
}

.grid-cell-25 {
  grid-column: 1 / span 25%;
}

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

См. span 25%,Я надеюсь, что grid-cell-25 будет охватывать 25% доступных столбцов в любой заданной точке останова.

Это ужасная идея?В этом примере для чего-то большего, чем мобильный, у меня есть макет с 12 столбцами.И в мобильном у меня есть 24 колонки.Я хотел избежать необходимости настраивать «span» для всех точек останова и вместо этого использовать процентные значения.

Answer 1

Мне интересно, есть ли способ использовать процентные значения для grid-column и / или grid-row.

Нет.Нет.Это не то, как работают свойства grid-column и grid-row.

Свойство grid-column является сокращенным свойством для grid-column-start и grid-column-end.Длинная стрелка «начало» идет перед косой чертой, а длинная рука «конец» идет после косой черты, например:

grid-column: 2 / 4

Правило выше эквивалентно:

grid-column-start: 2
grid-column-end: 4

Эти свойства используют строки столбца для определения размера и местоположения элемента сетки.

В приведенном выше примере область сетки будет начинаться со строки 2 столбца сетки (т. Е. С начального края второгостолбец) и заканчивается строкой 4 столбца сетки (т. е. конечным краем третьего столбца).Таким образом, он охватывает столбцы два и три.

Что-то вроде grid-column: 1 / span 25% не работает, потому что 25% не представляет любое количество строк столбца.

Вот почему свойства выше, иих аналоги строки сетки, все компоненты сетки, известные как размещение на основе строки .

Лучше всего в этом сценарии добавить второе правилоВаш медиа-запрос:

.grid {
  display: grid;
  box-sizing: border-box;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 24px;
}

.grid-cell-25 {
  grid-column: 1 / span 3;
}

@media only screen and (max-width: 600px) {
  .grid {
    grid-template-columns: repeat(24, 1fr);
  }
  .grid-cell-25 {
    grid-column-end: span 6;
  }
}