Geek Answers Handbook

Responsive multi-column list with column order

I am trying to create an ordered list of several columns, but I am struggling with CSS Grid layout rules.

The desired result should be responsive. On small screens, 2 grid columns, on large screens up to 4, while maintaining the order of the columns.

Instead of arranging as follows:

1  2  3  4
5  6  7  8
9  10 11 12
13 14 15

They should be ordered as follows:

1 5 9  13
2 6 10 14
3 7 11 15
4 8 12

I feel like I'm close with this violin .

ol {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: grey;
  
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(33.333%, 50%));
  grid-auto-flow: column;
  grid-template-rows: repeat(5, 1em);
}

li {
  outline: 1px solid orange;
}
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
</ol>
Run code

In particular, I struggle with these points:

a) grid-auto-flow: columnrequires column processing to work, but also forces me to add grid-template-rows: repeat(5, 1em)to indicate the number of rows, which violates responsiveness. Is there a way to calculate the number of rows automatically based on the content and column?

b) ? , minmax ?

+6
2

.

  • grid-auto-flow: column , , grid-template-rows: repeat(5, 1em), , . ?

grid-auto-flow: column . , . .

( ):

7.7. : grid-auto-flow

, , .

grid-auto-flow , , , .

column

, , .

row

, , . row column, row.

:

?

CSS Grid . , grid-auto-flow (column/row).

Grid, . , , -.

, , auto-fit auto-fill grid-template-columns grid-template-rows.

  1. ? , minmax ?

, .

:

grid-template-columns: repeat(auto-fill, minmax(33.333%, 50%));

: 33.333% 50%.

, . , grid-auto-flow: column. , grid-template-columns, .

- grid-auto-columns grid-auto-rows. auto, : - .

ol {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(33.333%, 50%));
  grid-auto-flow: column;
  grid-template-rows: repeat(5, 1em);

  margin: 0;
  padding: 0;
  list-style: none;
  background-color: grey;
}

li {
  outline: 1px solid orange;
}
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
</ol>

grid-auto-columns, .

ol {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(33.333%, 50%));
  grid-auto-flow: column;
  grid-template-rows: repeat(5, 1em);
  grid-auto-columns: 33.333%; /* NEW */

  margin: 0;
  padding: 0;
  list-style: none;
  background-color: grey;
}

li {
  outline: 1px solid orange;
}
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
</ol>

, , , , CSS Grid .

0

, :)

ol {
  margin: 0;
  padding: 0;
  list-style: none;
  /*---*/
  column-count: 4;
  column-gap: 0;
  width: 100%;
}

li {
  background-color: grey;
  outline: 1px solid orange;
}
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
</ol>
-1

More articles:


All Articles