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
– Temani Afif

2019-01-08 23:37:55 +00:00
Commented Jan 8, 2019 at 23:37 — Temani Afif
– Temani Afif, Commented Jan 8, 2019 at 23:37
I was hoping to avoid that if possible.

dman
– dman

2019-01-08 23:39:33 +00:00
Commented Jan 8, 2019 at 23:39 — dman
– dman, Commented Jan 8, 2019 at 23:39

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 9, 2019 at 0:14

Michael Benjamin

376k110 gold badges616 silver badges737 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Temani Afif Over a year ago

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

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related