代码之家 › 专栏 › 技术社区 › Ronald Zwiers

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

styled-components grid-layout css-grid flexbox css

Ronald Zwiers · 技术社区 · 4 年前

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

当第二个子项被动态添加到网格中时,它的高度应为100%,两个项目的宽度均为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;
    }
  `}
`;

0 回复 | 直到 4 年前

Temani Afif 4 年前

你可以用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=“容器”>
<div></div>
</div>
<div class=“容器”>
<div></div>
<div></div>
</div>
<div class=“容器”>
<div></div>
<div></div>
<div></div>
</div>
<div class=“容器”>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

<div class=“容器”>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

<div class=“容器”>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>