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

Question

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

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

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

第四项的宽度和高度应再次为 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>

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

How to set up a dynamic grid based on flex or grid

css

grid-layout

flexbox

css-grid

styled-components