如何控制网格项的高度

Question

我在网格中有多个六边形。我试图让网格项目（六边形）的高度和宽度响应布局。就像您在 jsfiddle 中看到的那样，它们从网格容器中溢出。有什么方法可以使高度和宽度相对于其容器固定，就像无论布局是什么一样，它们保持不变？

.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>

如有任何帮助，我们将不胜感激。

Answer 1

由于固定的高度和宽度值，您失去了响应能力。相反，我选择了最大和最小高度或宽度来定义值。我还在 hex-container 和 hexagons 上设置了 aspect-ratio，以便它们保持您想要的理想尺寸。

此外，将您的行更改为 grid-template-rows: repeat(2, auto); 以赋予它们响应性。

为了完成这项工作，我在第二行六边形上添加了一个 -25% 的 top 值（与剪辑路径中的点匹配），因此它们位于顶行六边形的旁边。

这将响应各种宽度和高度。

.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>

如何控制网格项的高度

How to control the height of grid items

html

css

css-grid