How to create a 3 column layout structure in react.js

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:

Solution

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

Comments

[Yuvi]

You could create a Table Component and its props would be rows and columns (in your case would look like id, title & completed). The rows would be your data which you could map using columns.

[soccerway]

I am looking for a normal '3 column ' div layout, sorry not a table one.

[coreyward]

ReactJS has no layout or styling capabilities outside of HTML and CSS, so this isn't really a React or JavaScript question.

[soccerway]

Where do I need to add the const Columns = {..., should I add that in App.js file ?

[coreyward]

@soccerway Totally up to you. If you're not yet familiar with React basics they have some pretty solid tutorials here.

[soccerway]

I figured out on how to use the style, awesome help coreward