css Question posted in
Some basic documentation can be found here.

How to wrap a css grid in both column and a certain amount of rows, while following logical alphabetical order?

So i have a grid setup like this

<div class="grid-container">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>
  <div>f</div>
  ...
  <div>z</div>
</div>

How can i make it appear in two columns, grouped in rows of say 4 high. Creating an arrangement like this:

a | e
b | f
c | g
d | h
----- 
i | m
j | n

...

s | w
t | x
----- 
y |
z |

Without the obvious answer of grouping 4 or 8 divs to a separate gridbox.
Implementations that differ from using divs are welcome too

I currently got it semi working except for the alphabetical sorting by using

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-template-rows: repeat(4, auto);
}

.grid-container DIV:nth-child(8n) {
  padding-bottom: 10px;
}

But that does not honor the alphabetical order, giving this:

a | b
c | d
e | f
g | h
-----
i | j

Adding

grid-auto-flow: column;

to the container makes it add more columns on overflow, disregarding the defined 2 columns.

Tags:

2

Answers


  1. 0

    There is no way (AFAIK) to do this dynamically.

    Grouping in 8s and leveraging subgrid would be logical.

    .grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  row-gap: 10px;
}

.item {}

.sub {
  display: grid;
  grid-column: span 2;
  grid-template-rows: repeat(4, auto);
  grid-template-columns: subgrid;
  grid-auto-flow: column;
}
    <div class="grid-container">
  <div class="sub">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>
  <div class="sub">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>

  <div class="sub">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>

</div>
    Login or Signup to reply.
  2. 0

    You have a pattern that repeats each 8 elements so:

    .grid-container {
  display: grid;
  gap: 5px;
  justify-content: start;
  grid-auto-flow: dense;
}
.grid-container :nth-child(8n + 1),
.grid-container :nth-child(8n + 2),
.grid-container :nth-child(8n + 3),
.grid-container :nth-child(8n + 4) {
  grid-column: 1;
}
.grid-container :nth-child(8n + 5),
.grid-container :nth-child(8n + 6),
.grid-container :nth-child(8n + 7),
.grid-container :nth-child(8n + 8) {
  grid-column: 2;
}

.grid-container :nth-child(8n + 8) {
  margin-bottom: 5px;
}
    <div class="grid-container">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>
  <div>f</div>
  <div>g</div>
  <div>h</div>
  <div>i</div>
  <div>j</div>
  <div>k</div>
  <div>l</div>
  <div>m</div>
  <div>n</div>
  <div>o</div>
  <div>p</div>
  <div>q</div>
  <div>r</div>
</div>

    And with some optimization:

    .grid-container {
  display: grid;
  gap: 5px;
  justify-content: start;
  grid-auto-flow: dense;
}
.grid-container > * {
  grid-column: 1;
}
.grid-container :is(:nth-child(8n + 5),:nth-child(8n + 6),:nth-child(8n + 7),:nth-child(8n)) {
  grid-column: 2;
}

.grid-container :nth-child(8n) {
  margin-bottom: 5px;
}
    <div class="grid-container">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>
  <div>f</div>
  <div>g</div>
  <div>h</div>
  <div>i</div>
  <div>j</div>
  <div>k</div>
  <div>l</div>
  <div>m</div>
  <div>n</div>
  <div>o</div>
  <div>p</div>
  <div>q</div>
  <div>r</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search