Javascript 将博客文章显示为一个“"；网格“；用React JS

在我的博客页面上，我现在列出了我所有的博客文章，每行一篇。我现在试图改变页面的布局，每隔一段时间每行显示两到三篇博客文章。像这样：

   [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;

从“React”导入React；
导入“./style.css”
从“道具类型”导入道具类型
从“buttercms”进口黄油
进口{
链接
}从“反应路由器dom”；
常量黄油=黄油（'XXXXXX'）；
类Post扩展了React.Component{
render（）{
返回(
{this.props.headline}
{this.props.read_time}{this.props.industry}
{this.props.description}
);
}
}
类dataFunction扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
加载：false
};
}
组件willmount（）{
butter.page.list（'blog-posts'）。然后（（resp）=>{
这是我的国家({
是的，
职位：resp.data.data
})
});
}
render（）{
if（this.state.loaded）{
const posts=this.state.post；
返回(
posts.map（（项目，索引）=>）
);
}否则{
返回(
加载。。。
);
}
}
}
Post.propTypes={
blogPostClick:PropTypes.func，
hero_image:PropTypes.string，
标题：PropTypes.string，
行业：PropTypes.string，
readtime:PropTypes.string，
描述：PropTypes.string
}
导出默认数据函数；

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

---

有什么建议吗？

有办法。只使用css会有点困难（尽管如果我有一个可行的想法，我会更新答案）

使用代码，逻辑基本上是在第3项和第5项后“断开”行

下面是一个“伪”代码，用于执行以下操作：

const items=data.map（（u，i）=>{
常数idx=i+1；
常量shouldBreak=！（idx%5）| |！（（idx%5）%3）；
返回(
{i+1}
{shouldBreak&}
);
});

.grid{
文本对齐：居中；
}
上校{
显示：内联块；
保证金：5px；
宽度：钙（33%-10px）；
背景：粉红色；
}

---

感谢他的伟大贡献，有一个基于css的解决方案，使用

grid

.grid{
显示：网格；
网格模板列：重复（12，1fr）；
网格自动行：40px；
栅隙：10px；
}
.col:n个孩子（5n+1），
.col:n个孩子（5n+2），
.col:n个孩子（5n+3）{
格构柱：跨度4；
}
.col:n个孩子（5n+4）{
格构柱：3/4跨；
}
.col:n个孩子（5n+5）{
格构柱：7/4跨；
}
上校{
背景色：番茄；
}

---

基本上，它是一个

div

s的列表，应该交替在第2行或第3行？@MoshFeu是的，没错。太棒了！正是我想要的。非常感谢：）