如何设置基于flex或grid的动态网格

Question

我想创建一个动态网格系统，其行为应如下所示：首先，当只有 1 个项目时，它的宽度和高度应为 100%。

当第二个子项动态添加到网格时，它的高度应为 100%，两个项目的宽度应为 50%。

添加第三个项目后，前两个项目的高度应为 0f 50%，宽度为 50%，第三个项目的高度应为 50%，宽度为 100%。

第四个项目的宽度应为 50%，高度为 50%。

第五个项目再次为 100% 宽度，所有项目应具有 33,33% 高度。无论添加多少项目，网格的行为方式都应始终相同。

目前我有：

const StyledVideoContainer = styled.div`
  ${({ number }) => `
    display: grid;
    grid-template-columns: repeat(${number}, 1fr);
    grid-template-rows: repeat(auto-fill, 100%);

    .videoContent {
      flex-grow: 1;
    }
  `}
`;

Answer 1

你可以使用 flexbox 来做到这一点，如下所示：

.container {
  border: 1px solid;
  display: inline-flex;
  flex-wrap: wrap; /* enable the wrap */
  margin:5px;
  vertical-align: top;
  width: 150px;
  height: 150px;
}

.container>* {
  flex-basis: 50%; /* width = 50% */
  flex-grow: 1; /* grow if alone in the last row */
  border: 1px solid red;
  box-sizing: border-box;
}

<div class="container">
  <div></div>
</div>
<div class="container">
  <div></div>
  <div></div>
</div>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

使用 CSS 网格会有点棘手，但你可以像下面这样做：

.container {
  border: 1px solid;
  display: inline-grid;
  grid-template-columns:1fr 1fr; /* 2 columns */
  grid-auto-rows:1fr; /* equal rows */
  margin:5px;
  vertical-align: top;
  width: 150px;
  height: 150px;
}

.container>* {
  border: 1px solid red;
}
.container>*:nth-child(odd):last-child {
  grid-column:span 2; /* take 2 columns */
}

<div class="container">
  <div></div>
</div>
<div class="container">
  <div></div>
  <div></div>
</div>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>