Отображать сообщения блога в виде "сетки" с помощью React JS

Question

На моей странице блога я в настоящее время перечисляю все свои записи блога в списке с одним сообщением блога в строке. Сейчас я пытаюсь изменить макет страницы и отображать два и три сообщения в блоге в строке каждый раз. Например:

   [POST] [POST]

[POST] [POST] [POST]

  [POST] [POST]

[POST] [POST] [POST]

etc....

При моей текущей установке у меня есть компонент Post, который является HTML Framework, а затем компонент DataFunction, который получает данные из API и возвращает список компонентов Post, который затем отобразить на странице.

import React from 'react';
import './style.css'
import PropTypes from 'prop-types'
import Butter from 'buttercms'
import {
    Link
} from 'react-router-dom';

const butter = Butter('XXXXXX');

class Post extends React.Component {
    render() {
        return (
            <div className="App-post grey-background" onClick={this.props.blogPostClick}>
                <div className="butter-page-container">
                    <div className="blog-item-small-img">
                        <img src={this.props.hero_image} alt="Blog images" />
                    </div>
                    <div className="small-text-module blog-item-text">
                        <Link to={`/post/${this.props.slug}` }>
                            <h4 className="text-green ng-btm">{this.props.headline}</h4>
                            <p className="text-green">{this.props.read_time} | {this.props.industry}</p>
                            <p className="text-green">{this.props.description}</p>
                        </Link>
                    </div>
                </div>
            </div>
        );
    }
}

class dataFunction extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            loaded: false
        };
    }

    componentWillMount() {
        butter.page.list('blog-posts').then((resp) => {
            this.setState({
                loaded: true,
                post: resp.data.data
            })
        });
    }
    render() {
        if (this.state.loaded) {
            const posts = this.state.post;
            return (
                posts.map((item, index) => <Post key={index} slug={item.slug} headline={item.fields.headline} read_time={item.fields.read_time} description={item.fields.description} industry={item.fields.industry} hero_image={item.fields.hero_image} />)
            );
        } else {
            return (
                <div>
                    Loading...
                </div>
            );
        }
    }
}

Post.propTypes = {
    blogPostClick: PropTypes.func,
    hero_image: PropTypes.string,
    headline: PropTypes.string,
    industry: PropTypes.string,
    readtime: PropTypes.string,
    description: PropTypes.string
}

export default dataFunction;

Помимо приведенного выше кода, у меня есть страница, которая импортирует функцию данных и отображает ее.

Есть предложения?

Answer 1

Есть способ сделать это. Это немного сложнее сделать только с css (хотя, если у меня есть рабочая идея, я обновлю ответ).

Используя код, логика c в основном «ломает» строка после каждого 3-го и 5-го пунктов.

Вот "псевдо" код, который делает это:

const items = data.map((_, i) => {
  const idx = i + 1;
  const shouldBreak = !(idx % 5) || !((idx % 5) % 3);
  return (
    <React.Fragment>
      <div className="col">{i + 1}</div>
      {shouldBreak && <div className="breaker" />}
    </React.Fragment>
  );
});

.grid {
  text-align: center;
}
.col {
  display: inline-block;
  margin: 5px;
  width: calc(33% - 10px);
  background: pink;
}

https://codesandbox.io/s/angry-wilbur-kgps0

---

Благодаря @ MichaelBenjamin с его великолепным ответом существует решение на основе css с использованием grid

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 40px;
  grid-gap: 10px;
}

.col:nth-child(5n + 1),
.col:nth-child(5n + 2),
.col:nth-child(5n + 3) {
  grid-column: span 4;
}
.col:nth-child(5n + 4) {
  grid-column: 3 / span 4;
}
.col:nth-child(5n + 5) {
  grid-column: 7 / span 4;
}

.col {
  background-color: tomato;
}

https://codesandbox.io/s/upbeat-dhawan-izjpf