Целевой автомат c макет с одной колонкой в ​​CSS Grid - PullRequest
Новая
       5

Целевой автомат c макет с одной колонкой в ​​CSS Grid

0 голосов
/ 03 марта 2020

При использовании grid-template-columns с repeat и auto-fill, есть ли способ динамически нацелить макет, который получается, когда сетка заканчивается только одним столбцом?

Как показано во фрагменте ниже Я использую медиазапрос, чтобы установить grid-auto-rows в 1fr при наличии более одного столбца, чтобы все строки имели одинаковую высоту.

В настоящее время, однако, математика для медиазапроса жестко запрограммирован, и если я изменю значения любой из длин, влияющих на макет, мне придется помнить, чтобы редактировать медиа-запрос.

Мне интересно, есть ли что-то встроенное в CSS Grid, что будет обрабатывать этот сценарий использования.

Желаемый результат состоит в том, что строки имеют одинаковую высоту только при наличии более одного столбца и что это правило динамически корректируется, когда факторы, влияющие на изменение макета (например, заполнение на сечение, разрыв сетки, et c.). 

:root {
  --space-1: 12px;
  --space-2: 30px;
}

.section {
  padding: 0 var(--space-1);
}

.grid {
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: var(--space-2);
  align-items: start;
}

.item {
  outline: 1px solid #d00;
}

/* 280*2+12*2+30 */
@media (min-width: 614px) {
  .grid {
    grid-auto-rows: 1fr;
  }
}
<section>
  <div class="grid">
    <div class="item">
      Lorem ipsum
    </div>
    <div class="item">
      Cillum elit incididunt velit eiusmod. Est eiusmod consectetur mollit commodo Lorem tempor commodo. Cillum reprehenderit irure est aute exercitation sunt. Anim elit incididunt est sunt minim anim anim veniam.
    </div>
    <div class="item">
    Consectetur enim consectetur est ut qui commodo magna ipsum. Lorem nisi eu nostrud cupidatat ad irure aliquip sit culpa Lorem ad. Mollit elit laborum eu laborum et in esse aliqua. Adipisicing fugiat ex minim magna laborum ad exercitation consequat occaecat magna ut. Magna est mollit dolore duis anim qui. Commodo dolor eu amet elit. Dolor mollit esse officia eiusmod magna incididunt voluptate anim consectetur irure aute ex.
    </div>
    <div class="item">
    Magna est mollit dolore duis anim qui. Commodo dolor eu amet elit. Dolor mollit esse officia eiusmod magna incididunt voluptate anim consectetur irure aute ex.
    </div>
    <div class="item">
    Mollit elit laborum eu laborum et in esse aliqua. Adipisicing fugiat ex minim magna laborum ad exercitation consequat occaecat magna ut. Magna est mollit dolore duis anim qui. Commodo dolor eu amet elit. Dolor mollit esse officia eiusmod magna incididunt voluptate anim consectetur irure aute ex.
    </div>
    <div class="item">
    Magna est mollit dolore duis anim qui. Commodo dolor eu amet elit. Dolor mollit esse officia eiusmod magna incididunt voluptate anim consectetur irure aute ex.
    </div>
    <div class="item">
    Consectetur enim consectetur est ut qui commodo magna ipsum. Lorem nisi eu nostrud cupidatat ad irure aliquip sit culpa Lorem ad. Mollit elit laborum eu laborum et in esse aliqua. Adipisicing fugiat ex minim magna laborum ad exercitation consequat occaecat magna ut. Magna est mollit dolore duis anim qui. Commodo dolor eu amet elit. Dolor mollit esse officia eiusmod magna incididunt voluptate anim consectetur irure aute ex.
    </div>
  </div>
</section>
...