CSS Grid перемещает столбцы при изменении размера экрана

Я изо всех сил пытаюсь придумать хороший способ настроить элементы сетки на HTML-странице. У меня есть несколько диаграмм, каждая из которых имеет предыдущую и текущую версии. Иногда они имеют разную высоту, поэтому я решил иметь два столбца и столько строк, сколько необходимо: предыдущие диаграммы слева, а текущие диаграммы справа:

<div class = "my-grid">
  <div class = "chart previous">Previous</div>
  <div class = "chart current">Current</div>
  <div class = "chart previous">Previous</div>
  <div class = "chart current">Current</div>
</div>

Однако, когда у меня узкий экран, я хочу, чтобы все диаграммы были в одном столбце, чтобы все текущие диаграммы находились перед всеми предыдущими диаграммами. Я попробовал сетку CSS, но она не перемещает диаграммы ни вперед, ни назад. Я пробовал использовать grid-template-areas, но все диаграммы перекрывались.

Вот код того, что у меня есть

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

Вот изображение желаемого широкого обзора (сейчас это работает)

Узкий:

Как я могу заставить это работать с сеткой CSS или с каким-либо другим простым CSS? Я не против переупорядочить элементы в HTML, если они правильно упорядочены на дисплее.

🤔 А знаете ли вы, что...
HTML5 - последняя версия HTML, внедряющая новые элементы и функциональность, такие как <canvas> и <video>.

[РЕШЕНО]Перейти к решению

Html113619 вопросов Css75481 вопрос Css grid1529 вопросов

Ответы:

Решено

Просто используйте grid-auto-flow: column, чтобы разместить элементы в соответствующих столбцах, затем, когда ширина станет достаточно маленькой, поместите их все в один столбец и укажите «предыдущим» элементам, чтобы они шли последними, используя order.

https://codepen.io/Paulie-D/pen/oNRqBpN?editors=1100

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
}

.previous {
  grid-column: 1;
  background-color: green;
}

.current {
  grid-column: 2;
  background-color: orange;
}

.item {
  border: 1px solid black;
}

.tall {
  height: 100px;
}

@media (max-width: 600px) {
 .grid {
   grid-template-columns: 1fr;
 }

 .previous {
  grid-column: 1;
  order:1;
 }

 .current {
  grid-column: 1;
 }
}

<div class = "grid">
  <div class = "item previous">Previous</div>
  <div class = "item current">Current</div>
  <div class = "item previous tall">Previous</div>
  <div class = "item current">Current</div>
  <div class = "item previous">Previous</div>
  <div class = "item current">Current</div>
  <div class = "item previous">Previous</div>
  <div class = "item current tall">Current</div>
</div>

Использовать свойство порядка CSS

Это свойство порядка упорядочит ваши диаграммы, просто добавьте их в свой код.


.previous {
    background-color: green;
    order:2;
}

.current {
    background-color: orange;
    order:1;
}

Это упорядочит текущий как первый, а предыдущий как второй в соответствии с предоставленными вами эталонными изображениями.

Для лучшего понимания этого Свойство заказа CSS

Поскольку вы упомянули, что перестановка HTML не является проблемой, я чувствую, что это скорее сценарий с флексбоксом, хотя Paulie_D уже рассказал вам, как заставить его работать с сеткой. На первый взгляд кажется более разумным объединить все одинаковые элементы в структуре HTML.

Поместите все текущие элементы в один div, все предыдущие элементы в другой div. Оба являются флексбоксами в режиме столбца.

Затем поместите обертку вокруг этих двух столбцов. Тоже флексбокс, но горизонтальный для десктопа и вертикальный для мобильных. flex-direction на обертке — единственное, что нужно изменить между двумя видами =)

<html>
 <head>
  <style>
   .grid {
display: flex;
gap: 16px;
   }

   .row-current, .row-previous {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
   }

   @media (max-width: 600px) {
.grid {
    flex-direction: column;
}
   }

   .item {
border: 1px solid black;
   }

   .tall {
height: 100px;
   }

   .previous {
background-color: green;
   }

   .current {
background-color: orange;
   }
  </style>
 </head>
 <body>
  <div class = "grid">
   <div class = "row-current">
    <div class = "item current">Current</div>
    <div class = "item current">Current</div>
    <div class = "item current">Current</div>
    <div class = "item current tall">Current</div>
   </div>
   <div class = "row-previous">
    <div class = "item previous">Previous</div>
    <div class = "item previous tall">Previous</div>
    <div class = "item previous">Previous</div>
    <div class = "item previous">Previous</div>
   </div>
  </div>
 </body>
</html>

(И в качестве дополнительного преимущества вам не нужно указывать «предыдущий» или «текущий» класс для каждого элемента, поскольку вместо этого на них можно ориентироваться через родительский элемент, т. е. .row-current > .item вместо .item.current.)

CSS Grid перемещает столбцы при изменении размера экрана

Ответы:

Использовать свойство порядка CSS

Интересные вопросы для изучения