Html Question posted in
Some basic documentation can be found here.

Html – Not able to display card components horizontally

I am developing a blogging website and here is my reactJS code and i am unable to display the card components horizontally.

App.js

import React from 'react';
import './App.css';
import Card from './components/Card';
import dp from './images/dp.jpeg';

export default function App() {

  return(
    <div className='App'>
      <center> <h1> Data Structure and Algorithms</h1></center>
      
      <div className='card-cont'>

        <Card
          title='Dynamic Programming'
          imageUrl={dp}
          body='Dynamic programming is both a mathematical optimization method and an algorithmic paradigm. '
        />
        <Card
          title='Dynamic Programming'
          imageUrl={dp}
          body='Dynamic programming is both a mathematical optimization method and an algorithmic paradigm. '
        />
      </div>
    </div>
  )
};

App.css

.card-cont {
  display: flex;  
  flex-wrap: wrap;           
  justify-content: space-around;
}

This is what i am getting

Tags:

3

Answers


  1. 0

    I would add flex direction to specify you want a row display.

    .card-cont {
  display: flex;  
  flex-wrap: wrap;
  flex-direction: row;         
  justify-content: space-around;
}

    If that doesn’t fix the issue, I would also specify the widths of each Card to ensure they are not taking up 100% of the width in the row.

    Login or Signup to reply.
  2. 0

    can you try the following css change?

    .card-cont {
  display: flex;
  justify-content: space-around;
}

    remove flex-wrap: wrap; and let me know if any

    Login or Signup to reply.
  3. 0

    The problem is the combination of using flex-wrap: wrap on the parent together with width: 100% in the children.

    Here a sample based on your component to show the issue:

    function App() {
  const [hasFullWidth, setHasFullWidth] = React.useState(false);
  const [hasFlexWrap, setHasFlexWrap] = React.useState(false);
  
  const getInnerDivClassName = (className) => `${className} ${hasFullWidth ? "width-100": ""}`;
  
  
  return (
    <div className="App">
      <center>
        {" "}
        <h1> Data Structure and Algorithms</h1>
        <button onClick={() => setHasFullWidth(prev => !prev)}>{`Use full width: ${hasFullWidth}`}</button>
        <button onClick={() => setHasFlexWrap(prev => !prev)}>{`Use flex-wrap: ${hasFlexWrap}`}</button>
      </center>
      <div className={`card-cont ${hasFlexWrap ? "flex-wrap": ""}`}>
        <div className={getInnerDivClassName("red")}>Card 1</div>
        <div className={getInnerDivClassName("green")}>Card 2</div>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
    .card-cont {
  display: flex;     
  justify-content: space-around;
}

.flex-wrap {
  flex-wrap: wrap;
}

.width-100 {
  width: 100%;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="root"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search