Creare griglie “responsive” valorizzando la proprietà display dei CSS a GRID

Le griglie messe a disposizione dai CSS con il metodo GRID sono facili da mettere in piedi e flessibili per i nostri contenuti. Vediamo un esempio base all’ indirizzo: https://www.farwebdesign.com/projectcssgrid/grid.html. Le modalità per formattare la pagina seguendo i criteri per la visualizzazione anche sui dispositivi mobili possono passare per varie strade con una impostazione classica senza pensare ai framework che sono vari e ognuno diverso: o si usano i FLOAT, o si valorizza la proprietà display dei css a FLEX o si usano le GRIGLIE, appunto impostando la proprietà display a GRID. Quando si parla di Web design spesso si evidenzia questo o quel framework (l’ultimo menzionato e sperimentato parzialmente ieri citando i W3CSS, ma non dimentichiamo materialize, bootstrap, bulma e tanti altri) ma spesso invidiando oltre la siepe del vicino ci si dimentica di quello che si ha in casa di nativo. La gerarchia padre e figlio tipico dell’ array DOM sta alla base di molte tecnologie, tra cui anche la flessibile opzione offerta dai CSS impostando semplicemente la proprietà display a GRID (l’altra tecnologia offerta è quella da approfondire che scaturisce valorizzando la proprietà a FLEX) . Un layout griglia deve avere un elemento padre con la proprietà display impostata su GRID o inline-grid per l’appunto e gli elementi figlio diretti discendenti del contenitore diventano automaticamente elementi griglia. Analizziamo la situazione proposta come esempio, un lavoro ispirato da PULP FINCTION di Tarantino, indirizzo web design umbria e codice presente nel TAG body:

<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: red;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid red;
padding: 10px;
font-size: 24px;
text-align: center;
font-family: ‘Bangers’, cursive;
}
</style>

<div class=”grid-container”>
<div class=”grid-item” style=”background-color:#ff9900″;>Sono il signor Wolf, risolvo problemi – Winston Wolf</div>
<div class=”grid-item”><img src=”img/vincentvega.png”/></div>
<div class=”grid-item” style=”background-color:yellow”;>Tre pomodori camminano per la strada. Papà pomodoro, mamma pomodoro e il pomodorino. Il pomodorino cammina con aria svagata e papà pomodoro allora si arrabbia e va da lui, lo schiaccia e dice: «Fai il concentrato!» – Vincent Vega</div>
<div class=”grid-item”><img src=”img/wolf.png”/></div>
<div class=”grid-item” style=”background-color:#ff9900″;>“Sì, stavo seduto a mangiarmi la focaccina, a bermi il caffè e a ripassare l’accaduto nella mia mente quando ho avuto quello che gli alcolisti definiscono il momento di lucidità.” – Jules Winnfield </div>
<div class=”grid-item”><img src=”img/winnfield.png”/></div>
<div class=”grid-item” style=”background-color:yellow”;>Mi chiamo Jerda, e non è con le chiacchiere che uscirai da questa merda – Jules Winnfield</div>
<div class=”grid-item”><img src=”img/marsellus.png”/></div>
<div class=”grid-item” style=”background-color:#ff9900″;>Rivolterò il mondo per trovarlo, e anche se andasse in Indocina uno dei nostri starà nascosto in una ciotola di riso pronto a sparargli nel culo – Marsellus Wallace </div>
</div>

web design umbriase guardiamo il CSS salta subito all’ occhio l’impostazione grid-container padre e subito dopo la formattazione degli elementi figlio con i grid-item. Questo in termini di flessibilità ci consente anche di personalizzare le singole celle all’ interno delle griglie, usando magari una soluzione style inline, come si è fatto per modificare alcuni colori di sfondo e personalizzare il lay-out (disposizione degli elementi). Pensiamo a quanta strada è stata fatta dai tempi in cui le tabelle dominavano gli scenari che presto caddero nel dimenticatorio per disegnare griglie di contenimento a causa della loro rigidità e dell’ avvento del mobile. Con la formula della GRID possiamo fare di tutto: impostare padding, margin, decidere quante righe e colonne avere, stabile il testo come deve essere visto all’ interno delle griglie, disegnare delle viste in cui alcune celle verticali prendono l’ampiezza parziale delle righe e viceversa. In questo modo i CSS ci offrono sempre tre soluzioni alternative nella sua formula classica rispetto a quello che vogliamo fare e in base al progetto che abbiamo in testa. Nell’ idea riportata sopra, il tutto si compie velocemente grazie a 4 immagine e un semplice copia incolla di semplici frasi cult estrapolate da siti dedicati al cinema. web design umbriaQuindi le GRID ad esempio sono consigliate in quei casi dove si deve realizzare una comunicazione visiva semplice, veloce da mettere in piedi e anche incisiva, perchè il fatto di essere semplice e rudimentale nella sua essenza non esclude al nostro progetto anche un ideale di proposizione estetica. Sfruttiamo sempre troppo poco di quello che abbiamo a disposizione come risorse e che ci galleggia sotto il naso quasi in modalità invisibile: le griglie offerte dai CSS esistono, quindi usiamole con creatività senza dimenticare gli scopi primari della comunicazione!

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...