使用 React JS 将博客文章显示为“网格”

Question

在我的博客页面上，我目前在一个列表中列出了我的所有博客文章，每行一篇博客文章。我现在正在尝试更改页面的布局，并每隔一段时间每行显示两到三篇博客文章。像这样：

   [POST] [POST]

[POST] [POST] [POST]

  [POST] [POST]

[POST] [POST] [POST]

etc....

使用我当前的设置，我有一个 Post 组件，它是 HTML 框架，然后是一个 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;

除了上面的代码，我还有一个页面可以导入 dataFunction 并呈现它。

有什么建议吗？

Answer 1

有一些方法可以做到这一点。仅使用 css 会有点困难（尽管如果我有一个可行的想法，我会更新答案）。

使用代码，逻辑基本上是在每个第 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 和他伟大的answer 有一个使用grid 的基于css 的解决方案

.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