Gridbox és una tecnologia que ens permet distribuir els diferents elements dins un contenidor de forma "responsive": els elements adapten la seva mida a l'espai disponible del dispositiu.

El "layout" d'una plana web de forma històrica ha estta complexe. La utilització de tècniques com float i de diferents "trucs" per a posicionar els elements dins d'una plana web dificulta el disseny i el mateniment posterior del mateix.

Cal donar unes eines que ens facilitin i normalitzin el "layout" de la plana web. Una d'aquestes eines és el CSS "grid" que ens permet ubicar els elements de forma fàcil en la nostra plana web i que aquesta, a més, sigui responsive.

Bases

Exemple bàsic
- Conceptes
Element grid
Línia de grid
grid-gap
- Utilitzant media
Exemple

La idea del CSS Grid és la de repartir l'espai del contenidor en diferents files i col·lumnes, podent associar un espai a cada una de les col·lumnes i a cada una de les nostres files.

Exemple bàsic


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="estils/main.css" />
    <title>CSS</title>
  </head>
  <body>
    <nav>
      <p>Menu</p>
    </nav>
    <main>
      <p>Main</p>
    </main>
    <aside>
      <p>aside</p>
    </aside>
  </body>
</html>


* {margin: 0;}
body {display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 100vh;}
nav, aside {background-color: rgba(127,127,127,0.5);}
main {background-color: rgba(10,0,127,0.5);}

El codi anterior genera 3 col·lumnes dins el contenidor body i una única fila que ocupa la totalitat de l'espai del dispositiu. Cada col·lumna opcupa 1fr (1 fracció) de l'espai disponible.

Conceptes

Element grid

Com hem pogut observar en l'exemple anterior, l'element de grid es divideix en una sèrie de col·lumnes (3 en el cas anterior) i una sèrie de files (1 única fila en el nostre exemple). Cada un dels fills de l'element que es defineix amb visualització grid constitueix un element o item del grid. En el nostre exemple tenim 3 items (nav, aside i main).

Línia de grid

Cada item o element del grid està comprès entre 4 línies: 2 línies horitzontals ( una superior i una inferior) i dues línies verticals (una a la dreta i una a l'esquerra). Cada una de les línies "imaginàries" del grid estan enumerades com a fila i columna, començant per la cantonada superior esquerra.

Per exemple, si el nostre grid tingués 4 col·lumnes i una única fila, tindríem les línies enumerades des de 1 fins a 5 per a cada col·lumna i dues línies associades a les files, tal i com es mostra en la imatge.

Utilitzant les línies imaginàries podem unir files o col·lumnes. Per a il·lustrar aquest punt utilitzarem un exemple. Volem afegir un footer en la nostra plana web. El footer ha d'ocupar tot l'espai horitzontal.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="estils/main.css" />
    <title>CSS</title>
  </head>
  <body>
    <nav>
      <p>Menu</p>
    </nav>
    <main>
      <p>Main</p>
    </main>
    <aside>
      <p>aside</p>
    </aside>
    <footer>
      <p>footer</p>
    </footer>
  </body>
</html>

Per aconseguir l'objectiu precisarem observem que tenim 3 columnes que s'ocuparan pels elements nav, main i aside . El nostre footer s'ubicarà de forma natural en la segona fila (entre línies 2 i 3) i en la primera col·lumna (línia 1 i 2). La posició natural de l'element per a la fila ja és correcte, per tant, només caldrà indicar que l'espai ocupat pel peu de plana ha d'anar des de la línia 1 fins a la línia 4. Per fer-ho, utiitzem la propietat grid-column-start i grid-colun-end.


* {margin: 0;}
body {display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 90vh 10vh;}
nav, aside {background-color: rgba(127,127,127,0.5);}
main {background-color: rgba(10,0,127,0.5);}
footer {
  background-color: rgba(127,127,0,0.5);
  grid-column-start: 1; grid-column-end: 4;
}

grid-column-start i grid-column-end


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="estils/main.css" />
    <title>CSS</title>
  </head>
  <body>
    <nav>
      <p>Menu</p>
    </nav>
    <main>
      <p>Main</p>
    </main>
    <aside>
      <p>aside</p>
    </aside>
    <footer>
      <p>footer</p>
    </footer>
  </body>
</html>


* {margin: 0;}
body {display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 90vh 10vh;}
nav, aside {background-color: rgba(127,127,127,0.5);}
main {background-color: rgba(10,0,127,0.5);}
footer {
  background-color: rgba(127,127,0,0.5);
  grid-column-start: 1; grid-column-end: 4;
}

grid-column

grid-column-start i grid-column-end poden simplificar-se mitjançant la propietat grid-column . Aquesta propietat pren 2 valors separats amb la barra de divisió "/". El primer valor és la línia d'inici mentre que el segon fa referència a la línia del final.

Ordre dels elements

Les propietats grid-column i grid-row ens permeten unir diverses col·lumnes i files de forma semblant a la propietat "merge" de les taules. Utilitzant aquesta propietat hi ha també la possibilitat de canviar l'ordre de visualització dels elements. Així, els elements s'ordenen per l'ordre en que apareixen en el codi HTML. Amb grid-column i grid-row podem indicar que un element es posicioni en una casella qualsevol del nostre grid, canviant, d'aquesta forma, l'ordre natural de visualització.

grid-gap

La propietat grid-gap ens permet inserir una separació entre els diferents "ítems" del grid, de forma que hi hagi una separació visible entre ells.


* {margin: 0;}
body {display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 90vh 10vh; grid-gap: 0.5em;}
nav, aside {background-color: rgba(127,127,127,0.5);}
main {background-color: rgba(10,0,127,0.5);}
footer {
  background-color: rgba(127,127,0,0.5);
  grid-column: 1/4;
}

Utilitzant media

Amb la directiva @media podem definir el nostre layout segons les característiques del nostre dispositiu. Així, per exemple, podem definir que la plana web es visualitzi en col·lumnes si té una determinada amplada o que es visualitzi en files si l'amplada és inferior.

Exemple


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="estils/main.css" />
    <title>CSS</title>
  </head>
  <body>
    <nav>
      <p>Menu</p>
    </nav>
    <main>
      <p>Main</p>
    </main>
    <aside>
      <p>aside</p>
    </aside>
    <footer>
      <p>footer</p>
    </footer>
  </body>
</html>

```CSS

{margin: 0;} body {display: grid; } nav, aside {background-color: rgba(127,127,127,0.5);} main {background-color: rgba(10,0,127,0.5);}

@media screen and (min-width:600px) { body {grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 90vh 10vh;} footer { background-color: rgba(127,127,0,0.5); grid-column: 1/4; } }

@media screen and (max-width:600px){ body { grid-template-columns: 1fr; } } }

CSS - Gridbox