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:

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:

• javascript
• reactjs

• 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. – Yuvi Commented Oct 7, 2019 at 22:51
• I am looking for a normal '3 column ' div layout, sorry not a table one. – soccerway Commented Oct 7, 2019 at 22:54
• 1 ReactJS has no layout or styling capabilities outside of HTML and CSS, so this isn't really a React or JavaScript question. – coreyward Commented Oct 7, 2019 at 22:57

3 Answers 3

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

Tailwind makes doing this super easy.

1. Use the columns-3 class

export default function Columns() {
    return <div className="bg-stone-900 h-64 columns-3 ">
        <div className="text-white">Column 1</div>
        <div className="text-white">Column 2</div>
        <div className="text-white">Column 3</div>
    </div>
}

2. Use the flex layout

export default function Columns() {
    return <div className="bg-stone-900 h-64 flex p-8">
        <div className="text-white flex-1">Column 1</div>
        <div className="text-white flex-1">Column 2</div>
        <div className="text-white flex-1">Column 3</div>
    </div>
}

3. Use the grid class with grid-cols-3 and col-span-1 in each child

export default function Columns() {
    return <div className="bg-stone-900 h-64 grid grid-cols-3 p-8">
        <div className="text-white col-span-1">Column 1</div>
        <div className="text-white col-span-1">Column 2</div>
        <div className="text-white col-span-1">Column 3</div>
    </div>
}

4. Create a table with a row and 3 s

<table className="table-auto">
    <thead>
        <tr className="text-white">Column 1</tr>
        <tr className="text-white">Column 2</tr>
        <tr className="text-white">Column 3</tr>
    </thead>
    <tbody>
        <tr>
            <td className="text-white">Column 1 </td >
            <td className="text-white">Column 1</td>
            <td className="text-white">Column 1</td>
        </tr>
    </tbody>
</table>

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]