Construct a grid view in REACT

Question

I want to do a Grid View of a react site.

The above one is what I want to do. However, I just construct this one.

The requirement of the grid view:

1. Only these are shown and in this order: image, content, time

2. A background colour of each grid item as #cccccc

3. Image and text shall be centeraligned

4. Width/height of each item: 200px, with 10px margin on all sides

5. Grid items should go to the next row if not fitting into a particular row

How can I change the css and react component?

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>
        );
    }
}

css:

.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;
}

Answer 1

You can use CSS grid for your needs. Use it in combination with the repeat and the minmax functions to have a responsive grid that auto fits everything into the containers width accordingly.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 12px;
}

.item {
  min-height: 200px;
  background-color: #eee;
}

<div class="grid">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
</div>