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

EN

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;

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;

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