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

Question

I have started learning about React js . Now I am building a blog page ideally a 3 column layout using React.js . Is there an efficient way of creating a simple 3 column layout, where I could style the columns. Created an App.js file and created files using Blog.js, BlogItem.js under components folder, but how to pass 3 column structure layout in React.js? Please advise

// App.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;

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

// Output as of now:

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"))

Answer 2

You could use bootstrap for this, you would only need to use className instead of class. I think this is what you are aiming for once you have imported Bootstrap.

https://getbootstrap.com/docs/4.3/layout/grid/ [1]

or yo could use CSS grid system

https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout [1]