Упорядочивайте элементы в столбцах по классам с помощью CSS-сетки
Я пытаюсь получить список div, упорядоченных по столбцам по его классу с сеткой css, но без JS.
Вот пример HTML:
<main>
<div class = "A">A_1</div>
<div class = "A">A_2</div>
<div class = "B">B_1</div>
<div class = "A">A_3</div>
<div class = "D">D_1</div>
<div class = "B">B_2</div>
<div class = "C">C_1</div>
<div class = "A">A_4</div>
<div class = "B">B_3</div>
<div class = "C">C_2</div>
<div class = "A">A_N</div>
<div class = "C">C_3</div>
<div class = "B">B_4</div>
<div class = "C">C_4</div>
<div class = "B">B_N</div>
<div class = "C">C_N</div>
<div class = "D">D_2</div>
<div class = "D">D_3</div>
<div class = "D">D_4</div>
<div class = "D">D_N</div>
</main>
И желаемый результат должен выглядеть так:
-------------------------
| A | B | C | D |
-------------------------
| A_1 | B_1 | C_1 | D_1 |
-------------------------
| A_2 | B_2 | C_2 | D_2 |
-------------------------
| A_3 | B_3 | C_3 | D_3 |
-------------------------
| A_4 | B_4 | C_4 | D_4 |
-------------------------
| A_N | B_N | C_N | D_N |
-------------------------
Есть ли способ сделать это? Я пробовал использовать grid-template-area, но либо мне нужно указывать один за другим, либо элементы в столбце накладываются друг на друга.
Если этого нельзя добиться с помощью сеток, как я могу это сделать?
Спасибо всем!
вы можете только приблизиться к этому, используя хакерский CSS
Ответы 2
Визуально этим можно управлять с помощью свойства order, но оно не расширяемое или динамическое.
main {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 2em); /* number of rows is required - so not dynamic */
grid-auto-flow: column;
}
.A {
order: 1;
}
.B {
order: 2;
}
.C {
order: 3;
}
.D {
order: 4;
}<main>
<div class = "A">A_1</div>
<div class = "A">A_2</div>
<div class = "B">B_1</div>
<div class = "A">A_3</div>
<div class = "D">D_1</div>
<div class = "B">B_2</div>
<div class = "C">C_1</div>
<div class = "A">A_4</div>
<div class = "B">B_3</div>
<div class = "C">C_2</div>
<div class = "A">A_N</div>
<div class = "C">C_3</div>
<div class = "B">B_4</div>
<div class = "C">C_4</div>
<div class = "B">B_N</div>
<div class = "C">C_N</div>
<div class = "D">D_2</div>
<div class = "D">D_3</div>
<div class = "D">D_4</div>
<div class = "D">D_N</div>
</main>Если вы создаете свою сетку с помощью flexbox, и все элементы A, A_1, A_2, A_3 находятся в порядке, когда вы смотрите на них, поскольку они возвращаются таким образом (что означает, что вам не нужно сортировать их в их собственном классе), я считаю вы можете использовать свойство order для элементов. И вам нужно будет установить свойство flex-direction для родительского элемента на «столбец».
Я быстро собрал код, чтобы показать вам, что все это будет отсортировано, как только вы это сделаете. Отсюда вам нужно будет решить, как стилизовать ваши содержащие элементы, и разбить систему сетки на последнем элементе.
Css - это язык стилей, насколько мне известно, он не может сортировать - вы можете упорядочивать вещи предопределенным способом, но не сортировать