1

Estou fazendo um estudo no grid do CSS e me deparei com um problema.

inserir a descrição da imagem aqui

Criei um grid com seis colunas e estou utilizando helpers para determinar quantas colunas vou mesclar. Estou confuso com o fato de que a coluna de 3 unidades da terceira linha é diferente da coluna de 3 unidades da quarta linha. A razão pela qual elas são diferentes tenho uma ideia, mas gostaria de saber se é possível arrumar ou se tem alguma gambiarra para fazer com que essas duas colunas se igualem em largura.

Abaixo está o código CSS.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --max-width: 1200px;
    --gutter-horizontal: 10px;
    --gutter-vertical: 10px;
    --direction: row;
}

.grid {
    display: grid;
    margin: 0 auto;
    max-width: var(--max-width);

    row-gap: var(--gutter-vertical);
}

.row {
    display: grid;
    grid-template-columns: repeat(6, auto);

    column-gap: var(--gutter-horizontal);
    row-gap: var(--gutter-vertical);
}

.col {
    background-color: orangered;
}

.col-1 { grid-column-end: span 1; }
.col-2 { grid-column-end: span 2; }
.col-3 { grid-column-end: span 3; }
.col-4 { grid-column-end: span 4; }
.col-5 { grid-column-end: span 5; }
.col-6 { grid-column-end: span 6; }

E aqui o HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Grid Layout</title>

    <link rel="stylesheet" href="grid-layout.css">
</head>
<body>
    <h1 style="text-align: center;">Grid Layout</h1>

    <div class="grid">

        <div class="row">
            <div class="col col-1">1 unit</div>
            <div class="col col-1">1 unit</div>
            <div class="col col-1">1 unit</div>
            <div class="col col-1">1 unit</div>
            <div class="col col-1">1 unit</div>
            <div class="col col-1">1 unit</div>
        </div>

        <div class="row">
            <div class="col col-2">2 units</div>
            <div class="col col-2">2 units</div>
            <div class="col col-2">2 units</div>
        </div>

        <div class="row">
            <div class="col col-3">3 units</div>
            <div class="col col-3">3 units</div>
        </div>

        <div class="row">
            <div class="col col-1">1 unit</div>
            <div class="col col-2">2 units</div>
            <div class="col col-3">3 units</div>
        </div>

        <div class="row">
            <div class="col col-1">1 unit</div>
            <div class="col col-5">5 units</div>
        </div>

        <div class="row">
            <div class="col col-2">2 units</div>
            <div class="col col-4">4 units</div>
        </div>

        <div class="row">
            <div class="col col-6">6 units</div>
        </div>
    </div>
</body>
</html>

1 Resposta 1

1

Você pode resolver isso utilizando a unidade de medida fr.

A unidade fr representa uma fração do espaço disponível no container do grid. Ir para documentação

.row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: var(--gutter-horizontal);
}
4
  • Nossa, tão simples assim!? Ainda acabou esclarecendo a dúvida sobre essa unidade de medida. Não tinha entendido o por que de usar o fr. Obrigado! 17/08/2021 às 16:04
  • 1
    Ao aplicar a unidade auto no tamanho da coluna está sendo considerado o tamanho do elemento filho pertencente a coluna. Só não sei dizer o motivo de que o span aplicado na propriedade grid-column-end estava tendo um tamanho diferente em determinado momento. 17/08/2021 às 16:46
  • 1
    Na verdade não tenho uma resposta concreta. Mas acredito que o motivo da diferença nos tamanhos seja o seguinte: todas as colunas estão com tamanho proporcional as colunas pertencentes a mesma linha. Até aí ok, mas por que o a coluna de 3 unidades da terceira linha (proporção de 1/2) é diferente da 3 unidades da quarta coluna (também de 1/2)? No cálculo não está sendo levado em conta o espaço entre as colunas. Na terceira linha tem menos espaços entre as colunas, logo mais espaço disponível pras elas ocuparem. Já na quarta linha a um espaço a mais, limitando um pouco o espaço disponível. 17/08/2021 às 22:30
  • 1
    Top! Era isso que eu estava tentando entender :) Boa @GabrielMorikawa 17/08/2021 às 22:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .