title: How to create a 3 column layout structure in react.js
body: <p>I have started learning about <code>React js</code>. Now I am building a blog page ideally a 3 column layout using <code>React.js</code>. Is there an efficient way of creating a simple 3 column layout, where I could <code>style</code> 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</p>
  
  <p>// App.js :</p>
  
  <pre><code>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 (
        &lt;div className="App"&gt;
        &lt;Blog blogs={this.state.blogs}/&gt;
        &lt;/div&gt;
      );
  
    }
  
  }
  
  export default App;
  </code></pre>
  
  <p>//Blog.js</p>
  
  <pre><code>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)=&gt;(
          &lt;BlogItem key={blog.id} blog={blog}/&gt;
      ));
    }
  
  }
  // PropTypes
  Blog.propTypes={
      blog: PropTypes.array.isRequired
  }
  
  export default Blog;
  </code></pre>
  
  <p>//BlogItem.js:</p>
  
  <pre><code>import React, { Component } from 'react'
  import PropTypes from 'prop-types';
  
  export class BlogItem extends Component {
      render() {
          return (
              &lt;div style={blogStyle}&gt;
                  &lt;p&gt;{this.props.blog.title}&lt;/p&gt;    
              &lt;/div&gt;
          )
      }
  }
  
  // PropTypes
  BlogItem.prototypes ={
      blog: PropTypes.object.isRequired
  }
  
  const blogStyle ={
      backgroundColor: '#c7c6c1'
  }
  
  export default BlogItem
  </code></pre>
  
  <p>// Output as of now:</p>
  
  <p><a href="https://i.stack.imgur.com/cls3R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cls3R.png" alt="e"></a></p>