CODEWITHSUNDEEP
javascripthtmlcssreactjsecmascript-6
Javier Richards
Javier Richards

Reputation: 49

How to position my elements horizontally in react with css

I have components that when viewed in my app are positioned vertically and I would like this to be horizontally. Which component should I apply the css property to and what would it be?

Thank you

Principal Component

    import React from 'react'
import Tournament from './Card.jsx'
import Tournaments from './ListTournaments.jsx'
import Carousel from './Carousel.jsx'
import '../resources/styles/grid.css'
import Header from './Header.jsx'
import Modal from './Modal.jsx'
import { BrowserRouter, Route, Link, Switch } from "react-router-dom";


const App = () => (
  <div>
    <Header />
    <Switch>
      <Route
       exact path="/"
      >
        <Carousel/>


      </Route>
      <Route
        path = "/tournaments"
      >

      <Tournaments/>


      </Route>
    </Switch>
  </div >
)

export default App

components that are displayed vertically


import React from 'react';
import Tournament from './Card.jsx'
var tournaments = require('../resources/data/tournament.json')

export default function ListTournaments(props) {


  return (
    tournaments.map((
      tournament,index )=>
        <Tournament
          title={tournament.title}
          description={tournament.description}
          requierements={tournament.requierements}
          date={tournament.date}
          img={tournament.img}
          key = {index}

        />

    )
  )
}

Space in blank is where I would like more components to be seen

Upvotes: 0

Views: 924

Answers (1)

Tracer69
Tracer69

Reputation: 1110

You could wrap the items of the ListTournaments component into a div and make it a flexbox via css.

=> Return this from ListTournaments

return (
    <div className="tournaments-list">
      tournaments.map((
        tournament,index )=>
          <Tournament
            title={tournament.title}
            description={tournament.description}
            requierements={tournament.requierements}
            date={tournament.date}
            img={tournament.img}
            key = {index}

          />

      )
     </div>
    )

Add this css (or similar e.g. grid)

.tournaments-list{
    display: "flex";
}

Upvotes: 1

Related Questions