CSS3 ofereix moltes funcionalitats per desenvolupadors i dissenyadors que vulguin marcar la diferència. Totes elles permeten incomptables aplicacions pràctiques. Una d’elles és CSS Grid.

Què permet?

  • CSS Grid permet crear graelles sense límit de files i columnes i establir unes mides a cadascuna.
  • Permetcol·locar objectes en qualssevol de les cel·les, i fer que un mateix objecte ocupi més d’una cel·la.
  • Substitueix aplicacions on fins ara s’usava l’atribut: position.

Exemple bàsic:

<section class="grid-1">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
<div class="item-7">7</div>
<div class="item-8">8</div>
<div class="item-9">9</div>
</section>

<style>
.grid-1 {
display: grid;
grid-template-columns: 150px 20px 150px 20px 150px;
grid-template-rows: auto 20px auto 20px auto;
}
.item-1 {
grid-column: 1;
grid-row: 1;
}
.item-2 {
grid-column: 3;
grid-row: 1;
}
.item-9 {
grid-column: 5;
grid-row: 5;
}
</style>

Tant si s’és un iniciat com un desenvolupador avançat, CSS Grid aporta facilitats i avantatges.