Estou fazendo um estudo no grid do CSS e me deparei com um problema.
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>