CSS Grid

[vc_row][vc_column][vc_column_text]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:[/vc_column_text][vc_column_text]

<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>
[/vc_column_text][vc_row_inner][vc_column_inner][vc_column_text]Tant si s’és un iniciat com un desenvolupador avançat, CSS Grid aporta facilitats i avantatges.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_btn title=”Guia ràpida per iniciar-se aquí.” style=”3d” color=”green” link=”url:https%3A%2F%2Fwebdesign.tutsplus.com%2Fes%2Ftutorials%2Fcss-grid-layout-quick-start-guide–cms-27238|title:V%C3%A9s|target:%20_blank|”][/vc_column_inner][vc_column_inner width=”1/2″][vc_btn title=”Guia completa per desenvolupadors aquí.” style=”3d” color=”orange” link=”url:https%3A%2F%2Fcss-tricks.com%2Fsnippets%2Fcss%2Fcomplete-guide-grid%2F|title:V%C3%A9s|target:%20_blank|”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]
Tags: No tags

Comments are closed.