css grid layout static responsive columns and rows

Question

I have a CSS grid layout (8 x 4). Preview: 1: https://i.sstatic.net/r3XAy.jpg

I have 8 cols and 4 rows. Columns are responsive (full width) with 1fr unit.
But I can't get the same behaviour with rows (need 4 rows full height). How can I get it?

My code:

HTML:

<div class="grid">
  <div id="item-1" class="item item-1">
    <span>1</span>
  </div>
  <div id="item-2" class="item item-2">
    <span>2</span>
  </div>
  ... <!-- until 29 -->

</div>
// Close grid

CSS:

    .grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr) minmax(200px, 1fr);
      overflow: hidden;
      grid-template-rows: repeat(4, 1fr);
      grid-gap: 15px;
    }


    .item {
      border-radius: 3px;
      text-align: center;
      color: white;
      height: 140px; // <-- need 4 rows, but full height. How to do it?
    }

    .progress-bar {
      grid-row: 1 / -1;
      grid-column: -2 / -1;
    }

Michael Benjamin · Accepted Answer · 2018-02-04 13:36:30Z

1

.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr) minmax(200px, 1fr);
  /* overflow: hidden; */
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 15px;
  height: 100vh; /* height must be defined; see link reference below */
}


.item {
  border-radius: 3px;
  text-align: center;
  color: white;
  /* height: 140px; */
}

.progress-bar {
  grid-row: 1 / -1;
  grid-column: -2 / -1;
}

body { margin: 0; } /* remove default margins */

Height explanation here: https://stackoverflow.com/a/46546152/3597276

edited Feb 4, 2018 at 13:36

answered Feb 4, 2018 at 13:30

Michael Benjamin

376k110 gold badges616 silver badges737 bronze badges

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

1 Comment

Baumannzone Over a year ago

Thanks, its working. I was trying to see the changes in PRO instead in local. That was the problem. Anyway, your solution its better.

Collectives™ on Stack Overflow

css grid layout static responsive columns and rows

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