javascript - 如何在 react.js 中创建 3 列布局结构

Question

我已经开始学习React js。现在我正在构建一个博客页面，理想情况下是使用 React.js 的 3 列布局。有没有一种创建简单的 3 列布局的有效方法，我可以在其中样式列。在 components 文件夹下创建了一个 App.js 文件并使用 Blog.js、BlogItem.js 创建了文件，但是如何在 React.js 中传递 3 列结构布局？请指教

//应用程序.js :

import React, {Component}from 'react';
import Blog from './components/Blog'
import './App.css';

class App extends Component {
  state={
    blogs:[
      {
        id: 1,
        title:'Javascript blog',
        completed: false
      },
      {
        id: 2,
        title:'Cypress blog',
        completed: false
      },
      {
        id: 3,
        title:'Testing blog',
        completed: false
      },
      {
        id: 4,
        title:'Java multi threading blog',
        completed: false
      },
      {
        id: 5,
        title:'Puppeteer blog',
        completed: false
      },
      {
        id: 6,
        title:'React Examples',
        completed: false
      }
    ]
  }
  render(){
    console.log(this.state.blogs)
    return (
      <div className="App">
      <Blog blogs={this.state.blogs}/>
      </div>
    );

  }

}

export default App;

//博客.js

import React, {Component}from 'react';
import BlogItem from './BlogItem';
import PropTypes from 'prop-types';


class Blog extends Component {
  render(){
    return this.props.blogs.map((blog)=>(
        <BlogItem key={blog.id} blog={blog}/>
    ));
  }

}
// PropTypes
Blog.propTypes={
    blog: PropTypes.array.isRequired
}

export default Blog;

//BlogItem.js:

import React, { Component } from 'react'
import PropTypes from 'prop-types';

export class BlogItem extends Component {
    render() {
        return (
            <div style={blogStyle}>
                <p>{this.props.blog.title}</p>    
            </div>
        )
    }
}

// PropTypes
BlogItem.prototypes ={
    blog: PropTypes.object.isRequired
}

const blogStyle ={
    backgroundColor: '#c7c6c1'
}

export default BlogItem

//目前的输出:

Answer 1

const Columns = () => 
  <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gridGap: 20 }}>
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
  </div>

ReactDOM.render(<Columns />, document.getElementById("root"))