Построить вид сетки в РЕАКТ

Question

Я хочу сделать Grid View сайта реакции.

Это то, что я хочу сделать. Тем не менее, я просто создаю этот.

Требование вида сетки:

1. Только они показаны и в следующем порядке: изображение, содержимое, время

2. Цвет фона каждого элемента сетки как # cccccc

3. Изображение и текст должны быть выровнены по центру

4. Ширина / высота каждого элемента: 200px, с полем 10px со всех сторон

5. Элементы сетки должны go переходить к следующему ряду, если они не помещаются в конкретный ряд

Как изменить css и реагировать компонент?

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

Вы можете использовать CSS сетку для своих нужд. Используйте его в сочетании с функциями repeat и minmax, чтобы получить адаптивную сетку, которая автоматически вписывает все в ширину контейнера.

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