CODEWITHSUNDEEP
cssreactjsflexbox
drifterOcean19
drifterOcean19

Reputation: 392

Flex cards in 5 column

This is my parent component that holds the cards. When on mobile/smaller screens, the cards are in a carousel - NukaCarousel and when on desktop they are in a 5-column list

I've tried to replicate it on sandbox but it's not appearing the way I want to.. but anyway here's how it looks on desktop which: enter image description here

and here how it looks on mobile where the gap differs depending on the screen size which what I don't want. I want the gap to stay the same:

enter image description here enter image description here

This is the parent components that does the switches between desktop and mobile :

  <React.Fragment>
    {!isMobile && !isIpad ? (
      <div className={cx(className, css.list)} {...props}>
        <CityCard src={'https://source.unsplash.com/random'} href={'#'} city={'London'} />
        <CityCard src={'https://source.unsplash.com/random'} href={'#'} city={'London'} />
        <CityCard src={'https://source.unsplash.com/random'} href={'#'} city={'London'} />
        <CityCard src={'https://source.unsplash.com/random'} href={'#'} city={'London'} />
        <CityCard src={'https://source.unsplash.com/random'} href={'#'} city={'London'} />
      </div>
    ):(
      <Carousel slidesToShow={2} peaking className={cx(className, css.list)} {...props}>
        <CityCard src={'https://source.unsplash.com/random'} href={'#'} city={'London'} />
        <CityCard src={'https://source.unsplash.com/random'} href={'#'} city={'London'} />
        <CityCard src={'https://source.unsplash.com/random'} href={'#'} city={'London'} />
        <CityCard src={'https://source.unsplash.com/random'} href={'#'} city={'London'} />
        <CityCard src={'https://source.unsplash.com/random'} href={'#'} city={'London'} />
      </Carousel>
    )}  
  </React.Fragment>

This is the css 

.list {
  position: relative;
  display: flex;
  justify-content: space-between;  
}

This is the CityCard component:

  <PictureCard
    className={css.card}
    src={src}
    href={href}
    center
  >
    <div className={cx(css.name, m.fontLgI)}>
      {city}
    </div>
  </PictureCard>

This is the css for the CityCard component:

.card {
  height: 25rem;
  width: 19%;
}

.card:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
}

.name {
  text-align: center;
}

@media (max-width:70.5rem) {
  .card {
    width: 93%;
  }
}

Finally my question is how do I make sure that the gap between the cards on mobile doesn't change when it goes to different screen sizes?

Upvotes: 0

Views: 298

Answers (1)

Pete
Pete

Reputation: 58432

If each row of cards is contained within it's own flex div, then you can just give the cards a width of 20% and control the space with a fixed width margin:

.list {
  display: flex;
}

.card {
  width: 20%;
  margin: 0 5px;
  /* following for demo only */
  border: 1px solid red;
  height: 100px;
}


/* if you wantcards tight up to left and right edges of row */
.card:first-child {
  margin-left: 0;
}

.card:last-child {
  margin-right: 0;
}
<div class="list">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

Upvotes: 1

Related Questions