时间戳

首页 > 解决方案 > 在 React 中创建一个更改行数和列数的网格系统？

css - 在 React 中创建一个更改行数和列数的网格系统？

问题描述

我有这个内容组件，它创建了一堆主题组件，每个主题只是一个包含主题名称等的正方形。

<div style={{ flex: 7 }}>
    {this.state.topics.length === 0 ? (
        <LoadingIcon />
    ) : (
        this.state.topics.map(topic => <Topic key={topic.id} topic={topic} />))}
</div>

我想让它有一个网格系统，以便我的主题一个接一个（从左到右）创建，然后当它到达屏幕末尾时，我想从下一行开始，它只需将尽可能多的主题放在一行中即可。我还想确保当窗口大小改变时，行和列再次改变，所以我没有任何溢出。我该怎么做呢？谢谢。

主题组件

import React from "react";

export default function Topic(props) {
    return (
        <div
            style={{
                display: "flex",
                flexDirection: "column",
                color: "black",
                backgroundColor: "white",
                width: "24em",
            }}
        >
            <div className="topic-name" style={{ fontWeight: "bold" }}>
                {props.topic.name}
            </div>
            <div className="topic-description">{props.topic.description}</div>
            <div className="topic-bottom-bar" style={{ display: "flex", flexDirection: "row" }}>
                <div>PostNumTemp</div>
                <div>AgeTemp</div>
            </div>
        </div>
    );
}

标签： cssreactjs

解决方案

我认为您只需要稍微调整样式即可。您的顶级 div 需要display: flex; flex-wrap: wrap;而您<Topic />不需要display: flex;. 如果您想深入了解，请查看我最喜欢的 flexbox 资源。

.container {
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: 100px;
  height: 20px;
  border: 1px solid black;
  text-align: center;
}
<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
  <div class="child">10</div>
  <div class="child">11</div>
  <div class="child">12</div>
  <div class="child">13</div>
  <div class="child">14</div>
</div>

推荐阅读