CSS: creare griglie fluide

Molti sistemi di griglie CSS forniscono misure fisse per creare l'impaginazione dei box. Tuttavia è possibile trasformare queste griglie fisse in griglie fluide con molta facilità. Vediamo come.

Immaginiamo di voler usare la misura di 960 pixel sul contenitore principale. Possiamo risolvere il problema dei pixel usando max-width:


#site {
	width: 70%;
	max-width: 960px;
	margin: 0 auto;
}

In questo caso la larghezza pari al 70% della pagina non potrà mai superare la larghezza massima di 960 pixel, rispettando così il valore di base della nostra griglia.

Gli altri elementi verranno definiti di conseguenza:


#featured {
	padding: 15px 0;
	overflow: hidden;
}

div.featured {
	float: left;
	width: 30%;
	padding: 0 5px;
	border-right: 1px solid #bbb;
}

#main {
	float: left;
	width: 60%;
	padding-top: 15px;
}

#content-sub {
	float: right;
	width: 35%;
	padding-top: 15px;
}

E quando ridimensioniamo la finestra, il layout scalerà automaticamente, come mostrato di seguito.

[caption id="attachment_2341" align="aligncenter" width="580" caption="Griglia fluida CSS ridimensionata a 800 x 600"][/caption]

Potete visionare l'esempio finale in questa pagina.

Torna su