Javascript 在REACT中构造网格视图

我想做一个网站的网格视图。

以上就是我想做的。然而，我只是构造了这个。

网格视图的要求：

仅显示这些内容，并按以下顺序显示：图像、内容、时间

每个网格项目的背景色为#CCCC

图像和文本应居中对齐

每个项目的宽度/高度：200px，各边留10px余量

如果网格项不适合特定行，则应转到下一行

如何更改css和react组件

jsx:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activities: activities,
            filteredActivities: activities,
            isShow: false,
            isGrid: false,
        };
    }

    render() {
        return(
            <div className="notificationsFrame">
                <div className="panel">
                    <Header name={this.props.name} onClickSearch={this.handleClickChange} onClickAdd={this.addItem} onClickChange={this.changeView}/>
                    { isShow ? <SearchBar inputChanged={this.handleSearchChange} /> : null }
                    { isGrid ? <ContentGrid activities={this.state.filteredActivities} /> : <ContentList activities={this.state.filteredActivities} onRightClick={this.deleteItem}/> }
                </div>
            </div>
        );
    }
}

class ContentGrid extends React.Component {
    render() {
        return (
            <div className="content">
                <div className="grid"></div>
                {this.props.activities.map(activity =>
                    <ActivityItemGrid img_url={activity.img_url} time={activity.time}
                        content={activity.content} comment_count={activity.comment_count}
                    />
                )}
            </div>
        );
    }
}

class ActivityItemGrid extends React.Component{
    render() {
        return (
            <div className="items">
                <div className="avatar">
                    <img src={this.props.img_url} />
                </div>
                <p>
                    {this.props.content}
                </p>
                <span className="time">
                    {this.props.time}
                </span>
            </div>
        );
    }
}

.demo {
  position: relative;
}

.demo .notificationsFrame {
  z-index: 2;
  width: 100%;
  top: 20px;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  font-family: "Open Sans", Helvetica, sans-serif;
  margin-bottom: 40px;
}

.demo .notificationsFrame .content {
  position: relative;
  overflow: hidden;
}

.demo .notificationsFrame .content .items {
  position: relative;
  z-index: 2;
  width: 200px;
  height: 200px;
  margin: 10px 10px 10px 10px;
  display: block;
  background-color: #cccccc;
  text-align: center;
}

.demo .notificationsFrame .content .items .time {
  display: block;
  font-size: 11px;
  line-height: 11px;
  margin-bottom: 2px;
}

.demo .notificationsFrame .content .items p {
  font-size: 15px;
  font-weight: bold;
}

.demo .notificationsFrame .content .items p b {
  font-weight: 600;
}

---

您可以根据需要使用CSS网格。将其与

repeat

和

minmax

功能结合使用，可使响应网格自动将所有内容放入相应的容器宽度中

.grid{
显示：网格；
网格模板列：重复（自动拟合，最小值（200px，1fr））；
栅隙：12px；
}
.项目{
最小高度：200px；
背景色：#eee；
}

项目1
项目2
项目3

使用CSS网格。