Início / coding / Perguntas / 78935431
Accepted
Meek
Asked: 2024-08-31 22:55:01 +0800 CST

Como fazer elementos com a mesma altura (mesma altura do mais alto) em uma coluna de caixas empilhadas verticalmente [duplicado]

  • 772

Tenho uma lista de caixas empilhadas verticalmente com alturas dinâmicas. Gostaria que cada caixa tivesse a mesma altura da mais alta delas. Como posso fazer isso usando a grade de exibição?

Aqui está o que eu tenho - gostaria que a caixa 1 fosse sempre tão alta quanto a caixa 2 - ou vice-versa:

.container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: 1rem;
}

.box {
  border: 1px solid #ddd;
  padding: 1rem;
  margin-bottom: 1rem;
}
<div class="container">
  <div class="box">
    <strong>Box 1:</strong>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.
  </div>
  <div class="box">
    <strong>Box 2:</strong>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.
  </div>
</div>
EDIT: Não estou procurando uma solução de altura uniformemente distribuída. Obrigado :-)

css

1 respostas

  1. Best Answer

    Adicionargrid-auto-rows: 1fr

    .container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: 1fr;
  row-gap: 1rem;
}

.box {
  border: 1px solid #ddd;
  padding: 1rem;
  margin-bottom: 1rem;
}
    <div class="container">
  <div class="box">
    <strong>Box 1:</strong>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.
  </div>
  <div class="box">
    <strong>Box 2:</strong>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.
  </div>
</div>

    • 2

relate perguntas