Можно ли заказать элемент сетки flexbox CSS с помощью nth-child и order? - PullRequest
Новая
       41

Можно ли заказать элемент сетки flexbox CSS с помощью nth-child и order?

0 голосов
/ 02 октября 2018

Я хотел бы изменить порядок элементов сетки (без class или id), но не могу изменить его, используя nth-child().

Это HTML: 

<div class='masonry'>
    <img src='lorem.jpg'>
    <img src='ipsum.jpg'>
    <img src='dolores.jpg'>
    <img src='amet.jpg'>
</div>

Ниже CSS: 

.masonry {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.masonry img:nth-child(2) {
  grid-column-start: span 2;
}

Следующее не работает;любое значение для order перемещает его в конец строки. 

.masonry img:nth-child(2) {
  order: 3;
}

См .: https://codepen.io/anon/pen/jebmrB

...