0

I have a grid with 1 row and I want that row to span the entire length of the page (or more if there is content inside that is longer than the length of the page). Height 100% is not working nor setting template-rows to 1fr.

HTML:

<div>
    <div className="grid calendar">
        <div className="grid-item">
            Some content will be inside each of these
        </div>
        <div className="grid-item"></div>
        <div className="grid-item"></div>
        <div className="grid-item"></div>
        <div className="grid-item"></div>
        <div className="grid-item"></div>
        <div className="grid-item"></div>
    </div>
</div>

CSS:

.grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 1fr;
  grid-column-gap: 10px;
  height: 100%;
}

.grid-item {
  border-left: 4px #e5e7eb solid;
}
ulou
  • 5,542
  • 5
  • 37
  • 47
hampani
  • 129
  • 11

2 Answers2

1

height 100% doesn't work cause it's 100% of parent element, that is 0 in your case, cause you didn't defined it. So you can either set the container height of 100vh and then yours 100% in .grid will work or you can change unit of the .grid height to vh.

100vh is something you are looking for.

.grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 1fr;
  grid-column-gap: 10px;
  min-height: 100vh;
  background-color: green;
}

.grid-item {
  border-left: 4px #e5e7eb solid;
}
<div>
    <div class="grid calendar">
        <div class="grid-item">
            Some content will be inside each of these
        </div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
    </div>
</div>
ulou
  • 5,542
  • 5
  • 37
  • 47
0

You can use vh and vw For example:

100vh = 100%(screen height)

100vw = 100%(screen width)

.grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 1fr;
  grid-column-gap: 10px;
  min-height: 100vh;
}

.grid-item {
  border-left: 4px #e5e7eb solid;
}
<div>
        <div className="grid calendar">
          <div className="grid-item">
               Some content will be inside each of these
          </div>
          <div className="grid-item"></div>
          <div className="grid-item"></div>
          <div className="grid-item"></div>
          <div className="grid-item"></div>
          <div className="grid-item"></div>
          <div className="grid-item"></div>
        </div>
      </div>
erfan
  • 149
  • 8