Можно ли всегда иметь четное количество столбцов с автозаполнением? - PullRequest
Новая
       22

Можно ли всегда иметь четное количество столбцов с автозаполнением?

0 голосов
/ 30 апреля 2018

Привет, я новичок в сетке CSS. Посмотрите на следующий пример: 

.platform {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 20px;
}

.item {
  width:100%;
  background-color:#aaa;
  padding:10px;
  box-sizing:border-box;
  text-align:center;
}

.wrapmed {
  max-width:400px;
}

.wrapsmall {
  max-width:300px;
}
<div class="platform">
  <div class="item">a</div>
  <div class="item">b</div>
  <div class="item">c</div>
  <div class="item">d</div>
</div>

<br/><br/>

<div class="wrapmed">
  <div class="platform">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">d</div>
  </div>
</div>

<br/><br/>

<div class="wrapsmall">
  <div class="platform">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">d</div>
  </div>
</div>

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

Я хочу иметь либо 4 столбца, либо два столбца, либо один . (Как) я могу достичь этого поведения?

Edit: фрагмент кода теперь показывает три возможных случая. Случай 2 нежелателен.

1 Ответ

0 голосов
/ 30 апреля 2018

Вы можете использовать класс psuedo четного или нечетного ребенка, так что .item nth-child (even)

...