0

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.

Kameron
  • 10,240
  • 4
  • 13
  • 26
Zed
  • 167
  • 2
  • 15
  • Do you want to maintain the same aspect ratio? Meaning the width shrinks at the same rate as the height. Or do you want the width to be constant and squash the height? – PsiKai Mar 05 '22 at 17:07
  • @PsiKai, I want both to adjust with aspect ratio. So I guess the former. – Zed Mar 05 '22 at 17:10
  • Do you mean like this? https://jsfiddle.net/xq3b4o2z/ – vee Mar 05 '22 at 17:27
  • @vee, thanks, but I'm hoping to handle dynamically with grid properties. Because It seems it's messing up the design with media queries and its still overflowing from the parent container. – Zed Mar 05 '22 at 17:39
  • So just to make sure I understand - you want 3 hexagons in the first row and 2 in the second and they should fill the width of the parent container whatever that is. Is that right or do you want to adjust to the correct aspect ratio depending on what the aspect ratio of the container (or the viewport??) is? – A Haworth Mar 05 '22 at 18:21
  • from the duplicate: https://stackoverflow.com/a/65684164/8620333 – Temani Afif Mar 05 '22 at 18:23
  • @AHaworth Yes 3 on the first and 2 on the second and yeah I want the latter. – Zed Mar 05 '22 at 18:47

1 Answers1

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>
PsiKai
  • 1,803
  • 1
  • 5
  • 19
  • Thank you man appreciate it. Your solution was the most closest to what I was looking for. I had to make a few adjustments to your code in order to make it work. But eventually, I got what I was looking for. Thanks again for putting in the time. – Zed Mar 06 '22 at 01:03