Generateur de grilles CSS
Construisez des grilles CSS visuellement. Ajustez colonnes, lignes et espacements, puis copiez le code.
Drag the edges or corners of any cell to resize it. Click a cell to select it.
11×1
21×1
31×1
41×1
51×1
61×1
6 cellsgrid-cols-3gap-4
CSS
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 16px;
.cell-1 {
grid-column: 1 / span 1;
grid-row: 1 / span 1;
}
.cell-2 {
grid-column: 2 / span 1;
grid-row: 1 / span 1;
}
.cell-3 {
grid-column: 3 / span 1;
grid-row: 1 / span 1;
}
.cell-4 {
grid-column: 1 / span 1;
grid-row: 2 / span 1;
}
.cell-5 {
grid-column: 2 / span 1;
grid-row: 2 / span 1;
}
.cell-6 {
grid-column: 3 / span 1;
grid-row: 2 / span 1;
}Tailwind CSS
<div class="grid grid-cols-3 grid-rows-2 gap-4">
<div>1</div>
<div class="col-start-2">2</div>
<div class="col-start-3">3</div>
<div class="row-start-2">4</div>
<div class="col-start-2 row-start-2">5</div>
<div class="col-start-3 row-start-2">6</div>
</div>Explorer d'autres Goodies
D'autres outils gratuits par Eguth Studio qui pourraient vous plaire.