Jugant amb CSS Grid — àrees
Css temporada 1 capítol 5
Aquest és el cinquè article d’una sèrie d’articles dedicats al CSS Grid:
En articles anteriors hem utilitzat CSS Grid per crear el nostre propi grid estil Ui-Kit, Bootstrap o similar. Com ja us podeu imaginar, si la cosa del CSS Grid ha de servir per fer el mateix que ja existeix, no calia fer-ho. Per sort aporta algunes coses més del que hem fet fins ara, i per veure-les farem un Layout.
El concepte en el fons és el mateix de sempre: al cap i a la fi, la maquetació sempre es basa en blocs que conformen contenidors i els espais que deixem entre ells. Així que farem blocs!
Comencem amb una idea, un concepte, un sketch, digueu-li com volgueu, per no partir de zero….
Comencem amb tres layouts per tal d’intentar reproduir-los.
Un codi habitual seria crear quatres classes per cada element i provar d’ubicar-los, ja sigui amb posicions absolutes, flex o altres possibilitats.
En el cas de CSS Grid per crear el layout seria tant fàcil com fer:
.layout {
display: grid;
grid-template-areas: “header header”
“menu content”
“footer footer”;
}A part caldrà donar algunes propietats bàsiques si volem que el layout ocupi tota la finestra del navegador, que és el nostre cas.
html, body {
height: 100%;
}
.layotu {
height: 100%;
display: grid;
grid-template-areas: "header header"
"menu content"
"footer footer";
}Voilà!
Ja tenim el layout fet. Opcionalment (quasi obligatori si volem quelcom coherent) podem definir mides a les columnes tal com hem vist en altres articles, i tractant-se de un layout també donarem mides a les files:
html, body {
height: 100%;
}
.layout {
height: 100%;
display:grid;
grid-template-columns: 300px auto;
grid-template-rows: 100px auto 100px;
grid-template-areas: "header header"
"menu content"
"footer footer";
}Però… d’acord, no funciona!
Cal alguna cosa més, oi?
Doncs sí, cada element necessita que li diguin en quina àrea s’ha de posar, o en cas contrari es posicionarà per defecte al primer block de la àrea “header” i així successivament fins a omplir totes les àrea definides.
L’avantatge de tenir noms definits és que ja no cal dir a l’element quantes areas ha d’ocupar amb les propietats grid-column-start i grid-column-end, i tampoc amb grid-row-start i grid-row-end. Només cal indicar que l’element ocupa l’area “content” perquè sàpiga automàticament on s’ha de posicionar i l’espai que ha de ocupar.
.logo {
grid-area: header;
}
.menu {
grid-area: menu;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}El nostre codi html seria aquest:
<div class="layout-1">
<div class="content">Content</div>
<div class="footer">Footer</div>
<div class="header">Header</div>
<div class="menu">Menu</div>
</div>Fixa’t que els elements ni tant sols estan per ordre, ho he fet expressament per a que vegis que no cal. El resultat aproximat és aquest:
Si ara volem reconvertir el nostre layout per un de diferent només cal modificar alguns detalls de la propietat grid-template-areas i…
html, body {
height: 100%;
}
.layout {
height: 100%;
display: grid;
grid-template-columns: 300px auto;
grid-template-rows: 100px auto 100px;
grid-template-areas: "header content"
"menu content"
"footer content";
}…tatxan! Canviant només el nom de les àrea la màgia ha ocorregut!
I si volem afegir línies i treballar a una sola columna?
Ha de ser una mica diferent. Eliminem fins i tot la propietat grid-template-columns, afegim la mida de la nova fila, i els noms de les àrees passen a tenir només un nom per fila.
html, body {
height: 100%;
}
.layout {
height: 100%;
display:grid;
grid-template-rows: 100px 100px auto 100px;
grid-template-areas: "header"
"menu"
"content"
"footer";
}
Ara ja sabeu com fer un layout de forma fàcil i com modificar-lo per poder fer diferents versions. Això és ideal per a fer diferents layouts en funció del dispositiu, ja que en mòbil sovint mostrem continguts de forma diferent a una pantalla gran.
Amb CSS Grid no hauràs ni de tocar la posició dels elements en el HTML: pots resoldre-ho amb classes o breakpoints, canviant una propietat CSS.
Espais buits
En el cas que no vulguem definir un gap per a tot el grid, però si un espai entre el menú i el contingut, en comptes de fer margins o altres invents (rars i qüestionables) podem posar-hi una columna.
L’afegim a totes les files i en cadascuna li indiquem el nom de l’àrea a la que pertany, i com pots veure a l’exemple, a la segona fila el nom és un punt: aquesta àrea no pertany ni al menú ni al contingut i restarà sempre buida.
.layout {
grid-template-columns: 300px 1em auto;
grid-template-rows: 100px auto 100px;
grid-template-areas: "header header header"
"menu . content"
"footer footer footer";
}Avui hem vist una altra manera de treballar amb CSS Grid bastant diferent i que a més facilita molt la feina de crear diferents layouts, i segur que serà un aliat molt bo a l’hora de fer components.
La setmana que mirarem la resta de propietats del CSS Grid que no s’han utilitzat fins ara, a veure si en podem treure alguna cosa interessant.
