All Free <Script>

3 Dicembre 2015

Questo è il codice css che ci serve per creare una griglia responsive di 12 colonne e 10 pixel di margine tra una riga e l’altra.

.griglia_1{width:8.333333333333332%;}
.griglia_2 {width:16.666666666666664%;}
.griglia_3 {width:25%;}
.griglia_4{width:33.33333333333333%;}
.griglia_5{width:41.66666666666667%;}
.griglia_6 {width:50%;}
.griglia_7{width:58.333333333333336%;}
.griglia_8{width:66.66666666666666%;}
.griglia_9{width:75%;}
.griglia_10{width: 83.33333333333334%;}
.griglia_11{width:91.66666666666666%;}
.griglia_12{width:100%;}

.colonna {
	overflow: hidden;
	float: left;
	display: inline;
}

.riga {
	width:100%;
	margin: 0 auto;
	overflow: hidden;
	margin-bottom:10px;
	background-color:#f5f5f5
}


/*testo*/
p {
font-size:1em;               
line-height:1.125em;
padding:0px 5px;
margin:5px;
text-align:justify
}

/* Responsive */
@media screen and (min-width: 960px) {
	div.container{width:90%;margin:0 auto}
}
@media screen and (max-width: 768px) {
	
	div.container{width:100%;}
	
	.colonna {
		float: none;
	}
.griglia_1,
.griglia_2,
.griglia_3,
.griglia_4,
.griglia_5,
.griglia„6,
.griglia_7,
.griglia_8,
.griglia_9,
.griglia_10,
.griglia_11,
.griglia_12	
	{
		width: auto;
	}
	
}

Per utilizzarla dobbiamo dichiarare un <div>, o un altro tag che faccia da contenitore, con classe “riga” in cui poi andremo a inserire le colonne della larghezza desiderata data dalla classe “griglia_X”; la somma della griglia deve dare sempre 12 che corrisponde al 100% della dimensione dello schermo, le righe possono essere annidate.

<div class="container">
	<div class="riga">
		<div class="colonna griglia_12">
			<p>Duis autem vel eum iriure dolor in hendrerit in....</p≶
		</div≶
	</div≶
	<div class="riga">
		<div class="colonna griglia_8">
			<div class="riga">
				<div class="colonna griglia_3">
					<p≶Duis autem vel eum iriure dolor in hendrerit in....</p≶
				</div≶
				<div class="colonna griglia_9">
					<p≶Duis autem vel eum iriure dolor in hendrerit in....</p≶
				</div≶
			</div≶
		</div≶
		<div class="colonna griglia_4">
			<p≶Duis autem vel eum iriure dolor in hendrerit in....</p≶
		</div≶
	</div≶
	<div class="riga">
		<div class="colonna griglia_3">
			<p≶Duis autem vel eum iriure dolor in hendrerit in....</p≶
		</div≶
		<div class="colonna griglia_6">
			<p≶Duis autem vel eum iriure dolor in hendrerit in....</p≶
		</div≶
		<div class="colonna griglia_3">
			<p≶Duis autem vel eum iriure dolor in hendrerit in....</p≶
		</div≶
	</div≶	
	<div class="riga">
		<div class="colonna griglia_4">
			<p≶Duis autem vel eum iriure dolor in hendrerit in....</p≶
		</div≶
		<div class="colonna griglia_4">
			<p≶Duis autem vel eum iriure dolor in hendrerit in....</p≶
		</div≶
		<div class="colonna griglia_4">
			<p≶Duis autem vel eum iriure dolor in hendrerit in....</p≶
		</div≶
	</div≶
	<div class="riga">
		<div class="colonna griglia_3">
			<p≶Duis autem vel eum iriure dolor in hendrerit in....</p≶
		</div≶
		<div class="colonna griglia_3">
			<p≶Duis autem vel eum iriure dolor in hendrerit in....</p≶
		</div≶
		<div class="colonna griglia_3">
			<p≶Duis autem vel eum iriure dolor in hendrerit in....</p≶
		</div≶
		<div class="colonna griglia_3">
			<p≶Duis autem vel eum iriure dolor in hendrerit in....</p≶
		</div≶
	</div≶
</div≶

Provare la demo ridimensiondo la finestra del browser.