CSS: creare una griglia responsive

CSS: creare una griglia responsive

Questo articolo contiene un'implementazione di una griglia CSS di tipo responsive. Spero che la troviate utile.

Il seguente codice utilizza le Media Queries per adattare la griglia al dispositivo:


.container {
    margin:0 auto;
    width:940px;
    position:relative;
}
 
.container .one-half,
.container .one-third,
.container .one-fourth,
.container .two-thirds,
.container .three-fourths {
    float:left;
    margin-right:20px;
}
 
.container .one-half.last,
.container .one-third.last,
.container .one-fourth.last,
.container .two-thirds.last,
.container .three-fourths.last {
    margin-right:0;
}
 
.container .one-half       { width:460px; }
.container .one-third      { width:300px; }
.container .one-fourth     { width:220px; }
.container .two-thirds     { width:620px; }
.container .three-fourths  { width:700px; }
 
/* ------------------------------------------- */
/*  Responsive Grid - 
/*      1. Tablet
/*      2. Mobile Portrait
/*      3. Mobile Landscape
/* ------------------------------------------- */
 
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .container                 { width:748px; }
    .container .one-half       { width:364px; }
    .container .one-third      { width:236px; }
    .container .one-fourth     { width:172px; }
    .container .two-thirds     { width:492px; }
    .container .three-fourths  { width:508px; }
}
 
@media only screen and (max-width: 767px) {
    .container       { width:300px; }
    .container .one-half,
    .container .one-third,
    .container .one-fourth,
    .container .two-thirds,
    .container .three-fourths { width:300px; margin-right:0; }
}
 
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container       { width:420px; }
    .container .one-half,
    .container .one-third,
    .container .one-fourth,
    .container .two-thirds,
    .container .three-fourths { width:420px; margin-right:0; }
}
Torna su