Início / user-11216219

windows9's questions

Martin Hope
windows9
Asked: 2025-04-10 04:59:32 +0800 CST
  • 5

Tenho uma grade CSS que flui verticalmente e se ajusta a uma nova coluna quando a primeira está cheia. Eu esperava que a largura desse elemento da grade fosse igual à largura de suas colunas. No entanto, ele parece estar somando as larguras de todos os seus elementos filhos.

Especificamente, se você alterar a largura de um dos elementos menores (por exemplo, alterar 4a para 4aa), embora a largura da coluna em que ele está não mude, a largura de toda a grade muda. Isso não parece ser um comportamento correto.

Como posso garantir que a grade ocupe apenas a largura de suas colunas?

.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid {
  border: 1px solid black;
  height: 200px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fit, 35px);
  grid-auto-columns: min-content;
}

.grid > * {
  display: flex;
  border: 1px solid gray;
}
<div class="parent">
  <p>label</p>
  <div class="grid">
    <div>1aaaaa</div>
    <div>2aaa</div>
    <div>3aa</div>
    <div>4a</div>
    <div>5aa</div>
    <div>6aa</div>
    <div>7a</div>
  </div>
</div>

O seguinte seria o comportamento esperado, mas eu gostaria que o pai fosse um flexbox de coluna.

.grid {
  border: 1px solid black;
  height: 200px;
  display: grid;
  width: min-content;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fit, 35px);
  grid-auto-columns: min-content;
}

.grid > * {
  display: flex;
  border: 1px solid gray;
}
<div class="parent">
  <p>label</p>
  <div class="grid">
    <div>1aaaaa</div>
    <div>2aaa</div>
    <div>3aa</div>
    <div>4a</div>
    <div>5aa</div>
    <div>6aa</div>
    <div>7a</div>
  </div>
</div>

html