如何使这个网格适应单元格的宽度？

Question

如何删除红色虚线的空格（见下图）？网格只会调整大小，同时保持子项的纵横比。

提供的代码行是另一个复杂代码的一部分，我想保持 #container 元素不可知，不应更改主要 css 属性。

我认为这是不可能的，也许flebox还有另一种方法。

#container {
  padding: 50px 80px;
  height: 70vh;
  display: flex;
  justify-content: center;
  background: grey;
}

#wrapper {
  background: red;
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: auto;
  grid-gap: 6px;
  min-width: 0;
  height: 100%;
  width: 100%;
  background: white;
}

.cell {
  background: black;
  width: fit-content;
  min-width: 0;
  overflow: hidden;
  background-color: black;
  border: black;
  aspect-ratio: 3/2;
  display: flex;
  position: relative;
  box-sizing: border-box;
}

<body>
  <div id="before-container"></div>
  <div id="container">
    <div id="wrapper">
      <div id="board">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
      </div>
    </div>
  </div>
  <div id="after-container"></div>
</body>

Answer 1

试试这个CSS

  #container {
    padding: 50px 80px;
    display: flex;
    justify-content: center;
    overflow: hidden; /* Hide any overflowing content */
  }

  #wrapper {
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  #board {
    display: flex; /* Use Flexbox */
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }

  .cell {
    background: black;
    flex: 0 0 calc(20% - 12px); /* Each cell takes 20% width with 6px gap */
    max-width: calc(20% - 12px); /* Set a maximum width for each cell */
    aspect-ratio: 3/2;
  }

如何使这个网格适应单元格的宽度？

问题描述投票：0回答：1

1个回答

最新问题

如何使这个网格适应单元格的宽度？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1