Currently, I am faced with an intriguing challenge involving a layout that includes a container containing 9 div elements. Each of these divs is assigned one of three classes: column-1, column-2, or column-3.
<div class="grid cols-3">
<div class="col column-1">
column-1
</div>
<div class="col column-2">
column-2
</div>
<div class="col column-3">
column-3
</div>
<div class="col column-1">
column-1
</div>
<div class="col column-2">
column-2
</div>
<div class="col column-3">
column-3
</div>
<div class="col column-1">
column-1
</div>
<div class="col column-2">
column-2
</div>
<div class="col column-3">
column-3
</div>
</div>
The task at hand involves splitting these 9 divs into 3 columns, each consisting of 3 divs with the same class.
While CSS Grid can accomplish this easily, I also need to account for browsers lacking GRID support, which is proving to be a challenge.
You can view the sample markup I'm dealing with here.
A project constraint requires that the markup remains untouched, necessitating a solution using CSS (or potentially javascript if necessary).
I briefly considered utilizing flexbox by setting flex-direction: column and assigning an order to each class like so: .column-1 { order: 1; }, .column-2 { order: 2; }, .column-3 { order: 3; }. However, although this reordered the divs correctly, they all ended up in a single column instead of 3, and I couldn't find a way to split them into separate columns using flex alone. :(
If you have any suggestions or ideas, I would greatly appreciate your input!