CODEWITHSUNDEEP
csscss-grid
dman
dman

Reputation: 11073

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

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>

Upvotes: 2

Views: 1460

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 372264

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.

Upvotes: 2

Related Questions