CODEWITHSUNDEEP
htmlcsscss-grid
Baumannzone
Baumannzone

Reputation: 780

css grid layout static responsive columns and rows

I have a CSS grid layout (8 x 4). Preview: 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;
    }

Upvotes: 0

Views: 2183

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371033

.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

Upvotes: 1

Related Questions