How to control the height of grid items

Question

I have multiple hexagons in a grid. I'm trying to have the grid items (hexagons) height and width responsive to the layout. Like as you can see in the jsfiddle they are overflowing from the grid container. Is there any way I could make the height and width fix relative to its container like whatever the layout is, they remain the same?

https://jsfiddle.net/gv5wc12x/3/

.home {
  width: 100%;
  height: 100vh;
  background-color: rgb(123, 158, 158);
}

.hex-container {
  max-width: 1000px;
  margin: 0px auto;
  margin-bottom: 100px;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: 205px;
  grid-gap: 2px;
  filter: drop-shadow(0px 0px 8px rgba(247, 247, 247, 0.9));
}

.hexagon {
  z-index: 0;
  display: flex;
  width: 250px;
  height: 270px;
  position: relative;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hexagon:first-child {
  grid-row-start: 1;
  grid-column: 2 / span 2;
  background-color: #003366;
}

.hexagon:nth-child(2) {
  grid-row-start: 1;
  grid-column: 4 / span 2;
  background-color: #87cefa;
}

.hexagon:nth-child(3) {
  grid-row-start: 1;
  grid-column: 6 / span 2;
  background-color: #f5f5f5;
}

.hexagon:nth-child(4) {
  grid-row-start: 2;
  grid-column: 3 / span 2;
  background-color: #f5f5f5;
}

.hexagon:nth-child(5) {
  grid-row-start: 2;
  grid-column: 5 / span 2;
  background-color: #003366;
}

<div class="home">
  <div class="hex-container">
    <div class="hexagon"></div>
    <div class="hexagon"></div>
    <div class="hexagon"></div>
    <div class="hexagon"></div>
    <div class="hexagon"></div>
  </div>
</div>

Please any help would be appreciated.

Answer 1

You were losing responsiveness because of fixed height and width values. Instead, I chose max and min height or widths to define the values. I also set aspect-ratio on the hex-container and the hexagons so they maintain the ideal dimensions you want.

Also, changed you rows to be grid-template-rows: repeat(2, auto); in order to give them resonsiveness.

In order to make that work, I added a top value on the second row hexagons of -25% (matching the point in the clip path) so they sit next to the top row of hexagons.

This will be responsive to widths and heights of all kinds.

.home {
    width: 100%;
    min-height: 100vh;
    background-color: rgb(123, 158, 158);
}

.hex-container {
    height: 100%;
    max-height: 100vh;
    max-width: 100%;
    aspect-ratio: 6 / 2;
    display: grid;
    grid-template-columns: repeat(6, auto);
    grid-template-rows: repeat(2, auto);
    grid-gap: 2px;
    filter: drop-shadow(0px 0px 8px rgba(247,247,247,0.9));
}

.hexagon {
    z-index: 0;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    background: #151515;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hexagon:first-child {
    grid-row-start: 1;
    grid-column: 1 / span 2;
    background-color: #003366;
    color: #fff;
    filter: drop-shadow(0px 0px 8px rgba(247,247,247,0.9));
}

.hexagon:nth-child(2) {
    grid-row-start: 1;
    grid-column: 3 / span 2;
    background-color: #87cefa;
    color: #fff;
}

.hexagon:nth-child(3) {
    grid-row-start: 1;
    grid-column: 5 / span 2;
    background-color: #f5f5f5;
    color: #003366
}

.hexagon:nth-child(4) {
    grid-row-start: 2;
    grid-column: 2 / span 2;
    background-color: #f5f5f5;
    color: #003366;
    position: relative;
    top: -25%;
}

.hexagon:nth-child(5) {
    grid-row-start: 2;
    grid-column: 4 / span 2;
    background-color: #003366;
    color: #fff;
    position: relative;
    top: -25%;
}

<div class="home">
  <div class="hex-container">
    <div class="hexagon"></div>
    <div class="hexagon"></div>
    <div class="hexagon"></div>
    <div class="hexagon"></div>
    <div class="hexagon"></div>
  </div>
</div>