-1

I have a row of reactstrap cards that are dynamically placed in rows, and for "md" screen sizes and up (bootstrap), there will be 3 cards per row, and for lower it'll be 2 cards.

Here's the component:

<Card
    outline
    as='a'
    style={{ cursor: 'pointer', margin: '1rem' }}
  >
    <CardImg top width='100%' src={img}' />
    <CardBody>
      <CardTitle tag='h5'>{this.props.title}</CardTitle>
    </CardBody>
  </Card>

My problem is, I want only the middle card to have margins on the sides (marginLeft: '1rem', marginRight: '1rem').

Since the number of cards in a row changes based on screensize, I can't just say "if it's a multiple of x, then have this style". Unless I know the screensize, so is there a way to create a prop in my parent component that I can pass into my card component to let it know what to set the margin as?

Thanks

(Any better suggestions are welcome)

More code:

render () {
    return (
        ...
        <div className='row' style={{margin:'0rem'}}>
            {
                disp.map((d, index) => {
                    return (
                        <div className='col-md-4 col-6 d-flex'>
                            <the card component here>
                        </div
                    )
                    ...
                }
            }
        </div>
    ....
chung
  • 835
  • 1
  • 7
  • 19
  • If there is a row of multiple cards in it and If I am not wrong then you want space in between that's why you are adding maring. Is that right? – DecPK Jul 20 '21 at 13:08
  • yes, I want space between each card, but I don't want extra margins on the side of the entire grid @decpk – chung Jul 20 '21 at 13:12

2 Answers2

0

If you want space in between the children then you can use gap and using flexbox. But gap property doesn't have great support.

html, body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.card-container {
  background-color: aquamarine;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card {
  border: 1px solid grey;
  padding: 1rem;
  height: 100px;
}

@media only screen and (min-width: 600px) {
  .card-container {
    flex-direction: row;
  }
  .card {
    flex: 1;
  }
}
<div class="card-container">
  <div class="card">card1</div>
  <div class="card">card1</div>
  <div class="card">card1</div>
</div>

So you can use

[parent-selector] > * + *

Above selector means select all children that are siblings of any element and which is direct child of parent-selector(use class for parent or HTML element).

If the structure is from top to bottom or in row view then you can use

.card-container > * + * {
    margin-top: 1rem;
}

and if you want space in between when the elements are arrange in left to right or in columns then use

.card-container > * + * {
    margin-left: 1rem;
}


html, body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.card-container {
  background-color: aquamarine;
  display: flex;
  flex-direction: column;
}

.card {
  border: 1px solid grey;
  padding: 1rem;
  height: 100px;
}

.card-container>*+* {
  margin-top: 1rem;
}

@media only screen and (min-width: 600px) {
  .card-container {
    flex-direction: row;
  }
  .card {
    flex: 1;
  }
  .card-container>*+* {
    margin-top: 0;
    margin-left: 1rem;
  }
}
<div class="card-container">
  <div class="card">card1</div>
  <div class="card">card1</div>
  <div class="card">card1</div>
</div>
DecPK
  • 24,537
  • 6
  • 26
  • 42
  • there's still margins on the left and right cards though. is there a way to keep the margins 0 for the very ends? – chung Jul 20 '21 at 13:30
  • @chung Edited. BTW that's the padding on the `.card-container` and `margin` of `body` added by `browser` – DecPK Jul 20 '21 at 13:34
  • see [codepen example here](https://codepen.io/kumarmasterpraveen/pen/MWmvpzN) – DecPK Jul 20 '21 at 13:36
  • thanks! and sorry, Im not sure how to implement bootstrap in codepen, but could you send a snippet with 6 cards? 3 on each row and see if each row looks the same? – chung Jul 20 '21 at 13:39
  • see [codepen](https://codepen.io/kumarmasterpraveen/pen/MWmvpzN?editors=1100) Is that what you want? – DecPK Jul 20 '21 at 13:47
0

"How to change margin size based on screen size breakpoints?"

That's exactly what the Bootstrap responsive spacing classes are used for. But, if you're using the grid (Row > Col) it's better to use padding (not margins) to adjust the spacing between columns.

Assuming you're using the column classes col-6 col-md-4 to get "for "md" screen sizes and up, there will be 3 cards per row, and for lower it'll be 2 cards."...

You can responsively adjust the padding on the columns, or the margin in the cards. For example, here's 3 margin units on md and up (mx-md-3), and 1 margin unit (mx-1) on lower:

   <Col className="col-6 col-md-4 py-3">
        <Card className="mx-1 mx-md-3">
           ...
        </Card>
   </Col>

React on Codeply

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624