CODEWITHSUNDEEP
csscss-grid
GravityL
GravityL

Reputation: 65

Order items in columns by class with css grid

I'm trying to get a list of divs ordered in columns by its class with css grid, but without JS.

Here is an HTML example:

<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>

And the desired output should look like this:

-------------------------
|  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 |
-------------------------

Is there a way to do this? I've tried using grid-template-areas but either I have to specify one by one, or the items in a colum get on top of each other.

If it can't be achived with grids, how could I do it?

Thanks to everyone!

Upvotes: 0

Views: 1929

Answers (2)

Paulie_D
Paulie_D

Reputation: 115108

Visually this can be managed with the order property but it's not extensible or dynamic.

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>

Upvotes: 2

brianespinosa
brianespinosa

Reputation: 2408

If you build your grid with flexbox, and the A, A_1, A_2, A_3 items are all in order when looking at them as they are returned like this, (meaning you do not have to sort them within their own class), I believe you may be able to use order property on the items. And you would have to set your flex-direction property on the parent to 'column'.

I threw a quick codepen together to show you that these all get sorted once you do this. From here you'll need to decide how to style your containing items, and make the grid system break at the last item.

https://codepen.io/brianespinosa/pen/XBQyyE

Upvotes: 0

Related Questions