I'm attempting to arrange the movieCards in a horizontal row, but they keep stacking up vertically instead

Question

I'm attempting to arrange the movieCards in a horizontal row, but they keep stacking up vertically instead

I have created a movie list component with different attributes in the div section to display the cards in a row. However, all the cards are currently aligned in a column. Should I use flex or grid to achieve the desired layout? If so, how can I implement them? I have consulted various resources but haven't been successful. What steps should I take to display the cards as I intend? Your assistance is greatly appreciated.

import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import MovieCard from './MovieCard';

const MoviesList = (props) => {
    // Component logic
}

export default MoviesList;

And here is the Movie card component:

import React from 'react';
import { useDispatch } from 'react-redux';
import { removeMovie } from '../actions/moviesAction';

const MovieCard = (props) => {
    // Component logic
}

export default MovieCard;

I would appreciate your help in resolving this issue. Thank you.

javascript css reactjs bootstrap-5 flexboxgrid

Answer 1

Answer №1

To enhance the layout of the MovieCard section, consider adding display: flex to the div that renders it. Here's an example:

<div className="row pt-2 justify-content-around" style={{textAlign: 'center', width: '100%', display: 'flex'}}>
            {
                filterBy.length > 0 ? (
                    filterBy.map((movie) => {
                        return <MovieCard key={movie.imdbID} Poster={movie.Poster} Title={movie.Title} imdbRating={movie.imdbRating} imdbID={movie.imdbID} />
                    })
                ) : (
                    show(movies).map((movie) => {
                        return <MovieCard key={movie.imdbID} {...movie} />
                    })
                )
            }
</div>

Answer 2

To enhance the layout of the MovieCard section, consider adding display: flex to the div that renders it. Here's an example:

<div className="row pt-2 justify-content-around" style={{textAlign: 'center', width: '100%', display: 'flex'}}>
            {
                filterBy.length > 0 ? (
                    filterBy.map((movie) => {
                        return <MovieCard key={movie.imdbID} Poster={movie.Poster} Title={movie.Title} imdbRating={movie.imdbRating} imdbID={movie.imdbID} />
                    })
                ) : (
                    show(movies).map((movie) => {
                        return <MovieCard key={movie.imdbID} {...movie} />
                    })
                )
            }
</div>

Answer 3

Answer №2

To achieve the desired layout, simply utilize the flex property.

Include the code snippet below within the parent div (the div containing all the cards).

If you have a separate CSS file, assign a class to the div and apply the following styles:

display: flex;
flex-wrap: wrap;
justify-content: center;

Alternatively, for inline styling, implement the following:

<div className="row pt-2 justify-content-around" style={{ textAlign: 'center', width: '100%', display: "flex", flexWrap: "wrap", justifyContent: "center" }}>
{filterBy.length > 0 ? (
     filterBy.map((movie) => {
         return <MovieCard key={movie.imdbID} Poster={movie.Poster} Title={movie.Title} imdbRating={movie.imdbRating} imdbID={movie.imdbID} />
      })
 ) : (
     show(movies).map((movie) => {
         return <MovieCard key={movie.imdbID} {...movie} />
     }
 )
)}
</div>

Answer 4

To achieve the desired layout, simply utilize the flex property.

Include the code snippet below within the parent div (the div containing all the cards).

If you have a separate CSS file, assign a class to the div and apply the following styles:

display: flex;
flex-wrap: wrap;
justify-content: center;

Alternatively, for inline styling, implement the following:

<div className="row pt-2 justify-content-around" style={{ textAlign: 'center', width: '100%', display: "flex", flexWrap: "wrap", justifyContent: "center" }}>
{filterBy.length > 0 ? (
     filterBy.map((movie) => {
         return <MovieCard key={movie.imdbID} Poster={movie.Poster} Title={movie.Title} imdbRating={movie.imdbRating} imdbID={movie.imdbID} />
      })
 ) : (
     show(movies).map((movie) => {
         return <MovieCard key={movie.imdbID} {...movie} />
     }
 )
)}
</div>

Answer 5

Answer №3

Consider utilizing a grid system similar to the code provided below to have more control over the number of rows and columns and their respective sizes.

**

<h1>Sample { grid-template-rows: 40% 50% 50px;}</h1>
<p><strong style="color: red">For a more concise approach, the grid-template property can replace both </strong>grid-template-rows and grid-template-columns.</p>
<hr>
<p style="font-family: Courier">When using grid-template, the values before the slash define the row sizes while those after the slash determine column sizes. </p><hr>
<p style="font-family: Courier">This example showcases a grid with 3 rows and 3 columns.</p><h1>Sample {grid-template: 40% 50% 50px/100px 50% 200px;}</h1><br>
<p><strong style="color: red">Through the use of the (fr) unit, columns and rows can be defined as fractions of the grid’s length and width.</strong><br>Utilizing (fr) simplifies preventing grid items from overflowing the grid boundaries.</p>
 <h1>Sample {grid-template: 1fr 1fr 1fr / 3fr 50% 1fr;}<br> width: 400px;<br>

**

Answer 6

Consider utilizing a grid system similar to the code provided below to have more control over the number of rows and columns and their respective sizes.

**

<h1>Sample { grid-template-rows: 40% 50% 50px;}</h1>
<p><strong style="color: red">For a more concise approach, the grid-template property can replace both </strong>grid-template-rows and grid-template-columns.</p>
<hr>
<p style="font-family: Courier">When using grid-template, the values before the slash define the row sizes while those after the slash determine column sizes. </p><hr>
<p style="font-family: Courier">This example showcases a grid with 3 rows and 3 columns.</p><h1>Sample {grid-template: 40% 50% 50px/100px 50% 200px;}</h1><br>
<p><strong style="color: red">Through the use of the (fr) unit, columns and rows can be defined as fractions of the grid’s length and width.</strong><br>Utilizing (fr) simplifies preventing grid items from overflowing the grid boundaries.</p>
 <h1>Sample {grid-template: 1fr 1fr 1fr / 3fr 50% 1fr;}<br> width: 400px;<br>

**

Answer 7

Answer №4

If you're utilizing Bootstrap, there's no requirement to directly use flex or grid. Bootstrap provides its own method to achieve the desired layout:

<div className="row">
   {books.map(item => (
      <div className="col">
        // add your content for the book here
      </div>
   ))}
</div>

Check out the Bootstrap documentation for more information

Answer 8

If you're utilizing Bootstrap, there's no requirement to directly use flex or grid. Bootstrap provides its own method to achieve the desired layout:

<div className="row">
   {books.map(item => (
      <div className="col">
        // add your content for the book here
      </div>
   ))}
</div>

Check out the Bootstrap documentation for more information

I'm attempting to arrange the movieCards in a horizontal row, but they keep stacking up vertically instead

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Limited functionality: MVC 5, Ajax, and Jquery script runs once

Having trouble reaching a public method within an object passed to the @Input field of an Angular component

The contents table remains fixed in the top right corner as you scroll

Troubleshooting Vue.js dynamic image path loading issues

Do you have any recommendations for a creative CSS method to achieve a full-screen background image?

Creating a Full Screen Image with HTML and CSS

Error: It seems that the function (0 , _redux_slices_loginAuthApiSlice__WEBPACK_IMPORTED_MODULE_4__.useLoginMutation) is not a valid function or the value it returns is not iterable

It is important for the CSS :active state to transition to an "inactive" state after a certain period of

Cease the continuous scrolling of the display element now

Error: Syntax mishap detected - Oh dear

The dynamically rendered component cannot be assigned to the type 'IntrinsicAttributes & ContentOutlineProps & ContentBrainstormProps'

Converting Blob URLs to MP3 Audio Files in Django

Command to conceal components for users visiting as guests

Can a page name and folder name containing dynamic pages be identical?

Steps for adding an npm dependency as a peer dependency:

"An error occurs when trying to trigger a .click() event within a list element

Having trouble with importing a TypeScript class: encountering a "cannot resolve" error message

Adaptive design exhibits varying appearances across various screen sizes

The Ajax script seems to be failing to update the PHP file along with its corresponding variable value

How to Send Javascript DOM Value to Inner HTML