CSS - Высота карт, которая имеет несоответствие [закрыто] ⇐ Html

[Anonymous]

У меня есть следующая проблема, связанная со следующей ситуацией: я должен сопоставить карты с одинаковой высотой, но с поворотом: когда я расширяю ее, я также не хочу влиять на остальные 2. Делай ... Я полностью потерян ... < /p>
Это мой код (я думаю, только соответствующие части): < /p>

Код: Выделить всё

function Features() {
const data = [some data, I won't paste it here]

return (


{data.map((feature, index) => (

))}


);
}

Этот код сгенерирует некоторые функции Элементы:

Код: Выделить всё

function FeatureBox({ title, description, canDo, cannotDo }) {
const [open, setOpen] = useState(false);

return (



{title}

{description}

 setOpen((prev) => !prev)}
>
{open ? (

) : (

)}


{/* Can Do */}
{open && (




Ce poate să facă {title}:

[list]
{canDo.map((item, index) => (
[*]

{item}

))}
[/list]

{/* Cannot Do */}


Ce nu poate să facă {title}:

[list]
{cannotDo.map((item, index) => (
[*]

{item}

))}
[/list]



)}

);
}

export default FeatureBox;
< /code>
У меня проблема с CSS. < /p>
Features.css

:

Код: Выделить всё

.features-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: start;
gap: 2.4rem;

padding: 2.4rem 4.8rem;
margin: 0 auto;
}
< /code>
FeatureBox.css

:
.feature-responsibilities-container {
display: grid;
grid-template-rows: auto auto;
gap: 2.4rem;
height: 100%;
}

.feature-box {
display: flex;
flex-direction: column;
background-color: #fafafa;
border-radius: 12px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
< /code>
How my cards look
Important note: I added the 100% height on the feature-box but then I will have this problem since each card will take the height of the parent container (the grid that encapsulate all of the cards):
Cars if my height is 100%

Подробнее здесь: https://stackoverflow.com/questions/797 ... a-mismatch