Switch columns on a row with dynamic data table using css grid?

Question

I'm looking at building a data table using css grids. The idea would be that it is ready to be fully responsive. Take the following example: https://jsfiddle.net/9L46zfp7/

body {
  margin: 0;
}

.container {
  width: 100%;
}

.cssgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-flow: dense;
}

.column {
  padding: 10px;
  border-bottom: 1px solid black;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.column1 {
  grid-column: 1;
  background-color: wheat;
}

.column2 {
  grid-column: 2;
  background-color: palegreen;
}

.column3 {
  grid-column: 3;
  background-color: lemonchiffon;
}

.column4 {
  grid-column: 4;
  background-color: lightcyan;
}

.column5 {
  grid-column: 5;
  background-color: thistle;
}

@media screen and (max-width: 800px) {
  .cssgrid {
    grid-template-columns: repeat(4, 1fr);
  }
  .column1 {
    grid-column: 1;
    grid-row: span 2;
  }
  .column2 {
    grid-column: 2;
    border: 0;
  }
  .column3 {
    grid-column: 3;
    border: 0;
  }
  .column4 {
    grid-column: 2;
    grid-column: span 2;
  }
  .column5 {
    grid-column: 4;
    grid-row: span 2;
  }
}

<div class="container">
  <div class="cssgrid">
    <!-- row -->
    <div class="column column1">0</div>
    <div class="column column2">1</div>
    <div class="column column3">2</div>
    <div class="column column4">3</div>
    <div class="column column5">4</div>
    <!-- row -->
    <div class="column column1">5</div>
    <div class="column column2">6</div>
    <div class="column column3">7</div>
    <div class="column column4">8</div>
    <div class="column column5">9</div>
  </div>
</div>

Here, you'll see that when the screen is less than 800px wide, the table rows will "split up" into two rows. Now, I'd really like to switch the green with the blue columns.

Is this possible using css only, knowing that the data is dynamically generated (so I cannot reference any specific column number, the html should remain unchanged)?

Thanks in advance!

Why not wrap each row in a proper container...seems to me that would make things much easier. You can do that as part of you content generation. — Paulie_D, May 28 '19 at 12:47
Assuming you have 100 columns in the table, do you do 100 different classes for them? — Krzysztof Antosik, May 28 '19 at 15:03
@Paulie_D sure, that would be an option, as long as it doesn't hinder me in the responsive aspect. — chris, May 29 '19 at 05:46
@KrzysztofAN I would rather not :) Ideally as little classes as possible. — chris, May 29 '19 at 05:47

score 2 · Accepted Answer · answered May 28 '19 at 16:52

You can drop the grid-column: n definitions from your code and see that it works without it (grid-auto-flow: dense helps you in achieving the layout without holes in it):

body {
  margin: 0;
}

.container {
  width: 100%;
}

.cssgrid {
  display: grid;
  grid-template-columns: 40px repeat(3, 1fr) 40px;
  grid-auto-flow: dense;
}

.column {
  padding: 10px;
  border-bottom: 1px solid black;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.column1 {
  background-color: wheat;
}

.column2 {
  background-color: palegreen;
}

.column3 {
  background-color: lemonchiffon;
}

.column4 {
  background-color: lightcyan;
}

.column5 {
  background-color: thistle;
}

@media screen and (max-width: 800px) {
  .cssgrid {
    grid-template-columns: 25px repeat(2, 1fr) 25px;
  }
  .column1 {
    grid-row: span 2;
  }
  .column2 {
    border: 0;
  }
  .column3 {
    border: 0;
  }
  .column4 {
    grid-column: span 2;
  }
  .column5 {
    grid-row: span 2;
  }
}

<div class="container">
  <div class="cssgrid">
    <!-- row -->
    <div class="column column1">0</div>
    <div class="column column2">1</div>
    <div class="column column3">2</div>
    <div class="column column4">3</div>
    <div class="column column5">4</div>
    <!-- row -->
    <div class="column column1">5</div>
    <div class="column column2">6</div>
    <div class="column column3">7</div>
    <div class="column column4">8</div>
    <div class="column column5">9</div>
  </div>
</div>

Now for generalizing you can use some nth-child logic for this to work for any number of columns - see demo below:

body {
  margin: 0;
}

.container {
  width: 100%;
}

.cssgrid {
  display: grid;
  grid-template-columns: 40px repeat(3, 1fr) 40px;
  grid-auto-flow: dense;
}

.column {
  padding: 10px;
  border-bottom: 1px solid black;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

@media screen and (max-width: 800px) {
  .cssgrid {
    grid-template-columns: 25px repeat(2, 1fr) 25px;
  }
  .column:nth-child(5n - 4),
  .column:nth-child(5n) {
    grid-row: span 2;
  }
  .column:nth-child(5n - 1) {
    grid-column: span 2;
  }
}


/* presentation styles below */

.column:nth-child(5n - 4) {
  background-color: wheat;
}

.column:nth-child(5n - 3) {
  background-color: palegreen;
}

.column:nth-child(5n - 2) {
  background-color: lemonchiffon;
}

.column:nth-child(5n - 1) {
  background-color: lightcyan;
}

.column:nth-child(5n) {
  background-color: thistle;
}

@media screen and (max-width: 800px) {
  .column:nth-child(5n - 3),
  .column:nth-child(5n - 2) {
    border: 0;
  }
}

<div class="container">
  <div class="cssgrid">
    <!-- row -->
    <div class="column">0</div>
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
    <div class="column">4</div>
    <!-- row -->
    <div class="column">5</div>
    <div class="column">6</div>
    <div class="column">7</div>
    <div class="column">8</div>
    <div class="column">9</div>
  </div>
</div>

I'd really like to switch the green with the blue columns.

With the current markup you can't really exchange the rows but you can get the colspans right:

body {
  margin: 0;
}

.container {
  width: 100%;
}

.cssgrid {
  display: grid;
  grid-template-columns: 40px repeat(3, 1fr) 40px;
  grid-auto-flow: dense;
}

.column {
  padding: 10px;
  border-bottom: 1px solid black;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

@media screen and (max-width: 800px) {
  .cssgrid {
    grid-template-columns: 25px repeat(2, 1fr) 25px;
  }
  .column:nth-child(5n - 4),
  .column:nth-child(5n) {
    grid-row: span 2;
  }
  .column:nth-child(5n - 3) {
    grid-column: span 2;
  }
  .column:nth-child(5n - 2) {
    grid-column: 3;
  }
 
  .column:nth-child(5n - 1) {
    grid-column: 2;
  }
}


/* presentation styles below */

.column:nth-child(5n - 4) {
  background-color: wheat;
}

.column:nth-child(5n - 3) {
  background-color: palegreen;
}

.column:nth-child(5n - 2) {
  background-color: lemonchiffon;
}

.column:nth-child(5n - 1) {
  background-color: lightcyan;
}

.column:nth-child(5n) {
  background-color: thistle;
}

@media screen and (max-width: 800px) {
  .column:nth-child(5n - 3){
    border: 0;
  }
}

<div class="container">
  <div class="cssgrid">
    <!-- row -->
    <div class="column">0</div>
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
    <div class="column">4</div>
    <!-- row -->
    <div class="column">5</div>
    <div class="column">6</div>
    <div class="column">7</div>
    <div class="column">8</div>
    <div class="column">9</div>
  </div>
</div>

You can't switch the row positions unless you explicitly place into rows (which essentially defeats the purpose I guess but you'll have to do with this) - see demo below:

body {
  margin: 0;
}

.container {
  width: 100%;
}

.cssgrid {
  display: grid;
  grid-template-columns: 40px repeat(3, 1fr) 40px;
  grid-auto-flow: dense;
}

.column {
  padding: 10px;
  border-bottom: 1px solid black;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

@media screen and (max-width: 800px) {
  .cssgrid {
    grid-template-columns: 25px repeat(2, 1fr) 25px;
  }
  .column:nth-child(5n - 4),
  .column:nth-child(5n) {
    grid-row: span 2;
  }
  .column:nth-child(5n - 3) {
    grid-column: span 2;
  }
  .column:nth-child(5n - 2) {
    grid-column: 3;
  }
 
  .column:nth-child(5n - 1) {
    grid-column: 2;
  }
  /* explicitly placing in rows for first group */
  .column:nth-child(2) {
    grid-row: 2;
    grid-column: 2 / span 2;
  }
  /* explicitly placing in rows for second group */
  .column:nth-child(7) {
    grid-row: 4;
    grid-column: 2 / span 2;
  }
  /* and so on */
}

/* presentation styles below */

.column:nth-child(5n - 4) {
  background-color: wheat;
}

.column:nth-child(5n - 3) {
  background-color: palegreen;
}

.column:nth-child(5n - 2) {
  background-color: lemonchiffon;
}

.column:nth-child(5n - 1) {
  background-color: lightcyan;
}

.column:nth-child(5n) {
  background-color: thistle;
}

@media screen and (max-width: 800px) {
  .column:nth-child(5n - 2),
  .column:nth-child(5n - 1) {
    border: 0;
  }
}

<div class="container">
  <div class="cssgrid">
    <!-- row -->
    <div class="column">0</div>
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
    <div class="column">4</div>
    <!-- row -->
    <div class="column">5</div>
    <div class="column">6</div>
    <div class="column">7</div>
    <div class="column">8</div>
    <div class="column">9</div>
  </div>
</div>

Thanks, that was really useful! I'll go play with your suggestions. — chris, May 29 '19 at 05:48
Hmm, I have a follow-up question, as I don't quite understand the auto-placement yet... If I add a column in the middle (so 6 in total, dividing 4 columns evenly, whilst the first and the last span over 2 rows), this doesn't work any more. Why is that? — chris, May 29 '19 at 09:12
@chris it'd help to test it by toggling `grid-auto-flow: dense`... see https://jsfiddle.net/enqt8w0d/ — kukkuz, May 29 '19 at 10:17
thanks, that did the trick indeed! But I still don't understand why this was necessary? — chris, May 29 '19 at 10:56
@chris *auto-placement* works like that :) `grid-auto-flow` is by default in the *row direction* - if you see computed properties you can see that it is actually `row dense` in our example (read more on this [here](https://stackoverflow.com/questions/56062699)) — kukkuz, May 29 '19 at 11:15

Switch columns on a row with dynamic data table using css grid?

1 Answers1