How to make all cards even

Question

I've recently been making a React JS app, and I've found a CSS problem that kind of bothers me. It's kind of hard to explain.

In the link below is the picture, and in there you can see that sometimes the "add to cart" button is higher up than the base of the container box in some cards, then down correctly on the baseline in others. The same is for the BUY button and the price text. And I want to try and make this all even so that all boxes are aligned evenly with each other.

This is my CSS code for the cards, which is named products.css:

.wrapper {
  margin: 0 auto;
  width: 90%;
}

.cards {
  list-style: none;
  margin: 0;
  padding: 0px;
}

.cards li {
  border: 2px solid #ffb485;
  border-radius: 5px;
  background-color: #e8e8e8;
  color: #fff;
  flex: 1 1 200px;
}

.price-colour {
  color: black;
}

.cards h2 {
  background-color: #ffb485;
  margin: 0;
  padding: 10px;
}

.cards p {
  padding: 10px;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.flex li {
  flex: 1 1 200px;
  margin: 10px;
}

If you need anymore information, or if my question was poorly phrased, please tell me. Any help is very much appreciated. Thank you!

Typically you can use CSS `line-height` on the various elements to ensure they're all the same size, as long as you know they won't overflow to variable number of lines each. — Martin, Apr 15 '21 at 08:55
I'm using React JS, and there's a lot of "non-html" code in there. Do I just share the HTML bits? And thanks, Martin and Ramin! — , Apr 15 '21 at 08:58
https://stackoverflow.com/questions/56711501/align-child-elements-of-different-blocks — Paulie_D, Apr 15 '21 at 09:34
It seems to me that you just need to make all the `
` elements the same height. — Andrew Morton, Apr 15 '21 at 16:35

score 0 · Answer 1 · answered Apr 15 '21 at 09:01

0

If by making even you mean making the 'buy' button, price tag and 'cart' button align to the bottom of the card, you can do so by adding a css margin attribute to the first one of those children.

A generalized example:

<div class="col">
  <div class="top-child">
    Aligned to top
  </div>
  <div class="bottom-child">
    Aligned to bottom
  </div>
  <div class="bottom-child">
    Aligned to bottom
  </div>
</div>

.col {
    display: flex;
    flex-direction: column;
    height: 300px;
}

.bottom-child.first {
    margin-top: auto; /* magic happens here*/
}

What this does, is that it makes that first 'bottom-child' have all the available margin to the top so that it brings itself all the way to the bottom of the parent div until it cannot go any further. The sibling after that (so that second .bottom-child) will be dragged to the bottom along with the first one, so that both will now be aligned to the bottom.

answered Apr 15 '21 at 09:01

Tafel

1,017
10
17

So I tried that, and [this](https://ibb.co/YLN1m3x) was what output. It's fine and all, but I would like it so the cards are on rows, like the first row has 3 cards, then the second has 3, etc. [This](https://pastecode.io/s/uHm5haeNeA) is my code in HTML after I implemented the code from your answer. And [this](https://pastecode.io/) is my CSS. – Apr 15 '21 at 09:14
@Snowi Your url for the css is not working. But I think it should work when you just keep your original (from the opening post) html and css and only add 'margin-top: auto' to the 'buy' button. – Tafel Apr 15 '21 at 09:32
Oh, sorry about the URL. And I tried what you said just now and it didn't work. But thank you for your help! – Apr 15 '21 at 11:06

score 0 · Accepted Answer · answered Apr 15 '21 at 17:27

If you use more display: flex;, you can persuade the title part to be at the top and the rest of the item to be at the bottom, like this:

body {
    font-family: 'Segoe UI', sans-serif;
}

.wrapper {
    margin: 0 auto;
    width: 90%;
}

.cards {
    list-style: none;
    margin: 0;
    padding: 0px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.card {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 10px;
    border: 2px solid #ffb485;
    border-radius: 5px;
    background-color: #e8e8e8;
    color: #fff;
    text-align: center;
}

.cardTitle {
    display: flex;
    align-items: center;
}

    .cardTitle h2 {
        background-color: #ffb485;
        font-weight: 500;
        /*height: 2.4em;*/
        margin: 0;
        padding: 2px 0 18px 0;
        text-align: center;
        width: 100%;
    }

.cardBody {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    margin-top: 16px;
    width: 100%;
}

    .cardBody div > * {
        margin: 0;
        padding: 12px;
    }

    .cardBody .price {
        color: black;
    }

        .cardBody .price h4 {
            font-weight: normal;
        }

.buy-product button {
    background-color: #ffb485;
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    padding: 8px 16px;
    text-transform: uppercase;
}

.cart-container {
    background-color: #ffb485;
    color: black;
    padding: 8px 0 8px 0;
    width: 100%;
}

<body class="wrapper">
    <div class="products">
        <ul class="cards">
            <li class="card">
                <div class="cardTitle">
                    <h2>Apple</h2>
                </div>
                <div class="cardBody">
                    <div class="buy-product">
                        <button>Buy</button>
                    </div>
                    <div class="price">
                        <h4>€9.99</h4>
                    </div>
                    <div class="cart-container">
                        <div class="product-icon">
                            <a class="cart">+</a>
                        </div>
                    </div>
                </div>
            </li>
            <li class="card">
                <div class="cardTitle">
                    <h2>Banana</h2>
                </div>
                <div class="cardBody">
                    <div class="buy-product">
                        <button>Buy</button>
                    </div>
                    <div class="price">
                        <h4>€8.99</h4>
                    </div>
                    <div class="cart-container">
                        <div class="product-icon">
                            <a class="cart">+</a>
                        </div>
                    </div>
                </div>
            </li>
            <li class="card">
                <div class="cardTitle">
                    <h2>Cantaloupe</h2>
                </div>
                <div class="cardBody">
                    <div class="buy-product">
                        <button>Buy</button>
                    </div>
                    <div class="price">
                        <h4>€11.99</h4>
                    </div>
                    <div class="cart-container">
                        <div class="product-icon">
                            <a class="cart">+</a>
                        </div>
                    </div>
                </div>
            </li>
            <li class="card">
                <div class="cardTitle">
                    <h2>Pourouma cecropiaefoli</h2>
                </div>
                <div class="cardBody">
                    <div class="buy-product">
                        <button>Buy</button>
                    </div>
                    <div class="price">
                        <h4>€11.99</h4>
                    </div>
                    <div class="cart-container">
                        <div class="product-icon">
                            <a class="cart">+</a>
                        </div>
                    </div>
                </div>
            </li>
            <li class="card">
                <div class="cardTitle">
                    <h2>The fruits of our labour</h2>
                </div>
                <div class="cardBody">
                    <div class="buy-product">
                        <button>Buy</button>
                    </div>
                    <div class="price">
                        <h4>Priceless</h4>
                    </div>
                    <div class="cart-container">
                        <div class="product-icon">
                            <a class="cart">+</a>
                        </div>
                    </div>
                </div>
            </li>
            <li class="card">
                <div class="cardTitle">
                    <h2>Where The Fruits Have No Name</h2>
                </div>
                <div class="cardBody">
                    <div class="buy-product">
                        <button>Buy</button>
                    </div>
                    <div class="price">
                        <h4>€99.99</h4>
                    </div>
                    <div class="cart-container">
                        <div class="product-icon">
                            <a class="cart">+</a>
                        </div>
                    </div>
                </div>
            </li>
            <li class="card">
                <div class="cardTitle">
                    <h2>More than one of these things is not like the others</h2>
                </div>
                <div class="cardBody">
                    <div class="buy-product">
                        <button>Buy</button>
                    </div>
                    <div class="price">
                        <h4>€11.99</h4>
                    </div>
                    <div class="cart-container">
                        <div class="product-icon">
                            <a class="cart">+</a>
                        </div>
                    </div>
                </div>
            </li>

        </ul>
    </div>
</body>

How to make all cards even

` elements the same height.

2 Answers2