Specify number of columns and still have row wrap in CSS Grid

Question

I am supposed to use css grid with 12 columns. I also am supposed to have the tables stack in a column when the viewport becomes smaller.

Is this possible with CSS grid? I read for row wrap I have to use auto-fill or auto-fit. But I use either of those two, I can not specify 12 columns.

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 2px;
  grid-template-columns: repeat(12, 1fr);
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.header {
  grid-column: 1 /12;
}

.table1 {
  grid-column: 1 / 7;
  grid-row: auto / span 20;
}

.table2,
.table3 {
  grid-column: 7/ 12;
  grid-row: auto;
}

<div class="wrapper">
  <div class="box header">header</div>
  <div class="box table1">table 1</div>


  <div class="box table2">table 2</div>
  <div class="box table3">table 3</div>

</div>

use media query and change the columns on small screens – Temani Afif Jan 08 '19 at 23:37 — Temani Afif, Jan 08 '19 at 23:37
I was hoping to avoid that if possible. – dman Jan 08 '19 at 23:39 — dman, Jan 08 '19 at 23:39

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

You cannot specify a fixed number of tracks with auto-fill or auto-fit.

§ 7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions

When auto-fill or auto-fit is given as the repetition number, if the grid container has a definite size or max size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container.

If any number of repetitions would overflow, then 1 repetition.

The best way to achieve your layout, considering the limitations of the current (Level 1) version of CSS Grid, is with flexbox (demo), which comes with its own set of limitations, or with the crude and inelegant power of good old-fashioned media queries.

hi, it would be good if you can take a look at this one :https://stackoverflow.com/q/54128973/8620333 . I am not really sure about my explanation, you can probably correct me or give a more accurate answer :) — Temani Afif, Jan 10 '19 at 16:06

Specify number of columns and still have row wrap in CSS Grid

1 Answers1