Responsive Raster, wie Rand zwischen den Spalten hinzufügen?

Ich bin natürlich über html & CSS und Verwendung geändert reaktions Raster von hier beobachten: http://www.responsivegridsystem.com/calculator/Responsive Raster, wie Rand zwischen den Spalten hinzufügen?

Wenn Browserbreite abnimmt, divs, um neue Linien gehen und schließlich in einer Spalte angezeigt. Es funktioniert, aber

kann nicht horizontalen Abstand zwischen den Elementen hinzufügen:

jsfiddle

index.html

<!-- FIRST ROW --> 
<div class="row"> 
    <div class="col span-1-of-2 box"> 
     <h3>first-row span-1</h3> 
    </div> 
    <div class="col span-1-of-2 box"> 
     <h3>first-row span-2</h3> 
    </div> 
</div> 

<!-- SECOND ROW --> 
<div class="row"> 
    <div class="col span-1-of-4 box"> 
     <h3>second-row span-1</h3> 
     <p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We 
      work with the best chefs in each town to ensure that you're 100% happy.</p> 
    </div> 
    <div class="col span-1-of-4 box"> 
     <h3>second-row span-2</h3> 
     <p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We 
      work with the best chefs in each town to ensure that you're 100% happy.</p> 
    </div> 
    <div class="col span-1-of-4 box"> 
     <h3>second-row span-3</h3> 
     <p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We 
      work with the best chefs in each town to ensure that you're 100% happy.</p> 
    </div> 
    <div class="col span-1-of-4 box"> 
     <h3>second-row span-4</h3> 
     <p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We 
      work with the best chefs in each town to ensure that you're 100% happy.</p> 
    </div> 
</div>

Media.css

012.351.

/* small phones to small tyablets 481 to 767 */ 
@media only screen and (max-width: 767px) { 
    .col { margin: 1% 0 1% 0%; } 
    .span-1-of-2 { width: 98%; padding-right: 1%;} 
    .span-1-of-4, .span-2-of-4, .span-3-of-4, .span-4-of-4 { width: 45%; } 
} 

/* small phones 0 to 480 */ 
@media only screen and (max-width: 480px) { 
    .col { margin: 1% 1% 1% 1%; } 
    .span-1-of-4, .span-2-of-4, .span-3-of-4, .span-4-of-4 { width: 100%; } 
}

styles.css

/* -------- REUSABLE COMPONENETS -------- */ 
* { 
    margin: 0%; 
    padding: 0%; 
    box-sizing: border-box; 
} 

html { 
    background-color: #fff; 
    color: #555; 
    font-family: 'Lato', 'Arial', sans-serif; 
    font-size: 20px; 
    font-weight: 300; 
    text-rendering: optimizeLegibility; 
} 

.clearfix {zoom: 1;} 
.clearfix:after { 
    content: ' '; 
    clear: both; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 

/* row class from grid css */ 
.row {    
    width: 1140px; 
    margin: 0 auto; 
} 

section { 
    padding: 80px 0; 
} 

/* class to modify out-of-the-box grid classes (like 'span-1-of-4') */ 
.box {    

    background-color: #1ba1e2; 
    border: 1px solid gray; 
}

grid.css

/* SECTIONS ============================================================================= */ 

.section { 
    clear: both; 
    padding: 0px; 
    margin: 0px; 
} 

/* GROUPING ============================================================================= */ 

.row { 
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */ 
} 

.row:before, 
.row:after { 
    content:""; 
    display:table; 
} 
.row:after { 
    clear:both; 
} 

/* GRID COLUMN SETUP ==================================================================== */ 

.col { 
    display: block; 
    float:left; 
    margin: 1% 0 1% 1.6%; 
} 

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */ 


/* REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */ 

@media only screen and (max-width: 480px) { 
    .col { 
     /*margin: 1% 0 1% 0%;*/ 
     margin: 0; 
    } 
} 


/* GRID OF TWO ============================================================================= */ 


.span-2-of-2 { 
    width: 100%; 
} 

.span-1-of-2 { 
    width: 49.2%; 
} 

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 

@media only screen and (max-width: 480px) { 
    .span-2-of-2 { 
     width: 100%; 
    } 
    .span-1-of-2 { 
     width: 100%; 
    } 
} 


/* GRID OF THREE ============================================================================= */ 


.span-3-of-3 { 
    width: 100%; 
} 

.span-2-of-3 { 
    width: 66.13%; 
} 

.span-1-of-3 { 
    width: 32.26%; 
} 


/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 

@media only screen and (max-width: 480px) { 
    .span-3-of-3 { 
     width: 100%; 
    } 
    .span-2-of-3 { 
     width: 100%; 
    } 
    .span-1-of-3 { 
     width: 100%; 
    } 
} 

/* GRID OF FOUR ============================================================================= */ 


.span-4-of-4 { 
    width: 100%; 
} 

.span-3-of-4 { 
    width: 74.6%; 
} 

.span-2-of-4 { 
    width: 49.2%; 
} 

.span-1-of-4 { 
    width: 23.8%; 
} 


/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 

@media only screen and (max-width: 480px) { 
    .span-4-of-4 { 
     width: 100%; 
    } 
    .span-3-of-4 { 
     width: 100%; 
    } 
    .span-2-of-4 { 
     width: 100%; 
    } 
    .span-1-of-4 { 
     width: 100%; 
    } 
} 


/* GRID OF FIVE ============================================================================= */ 


.span-5-of-5 { 
    width: 100%; 
} 

.span-4-of-5 { 
    width: 79.68%; 
} 

.span-3-of-5 { 
    width: 59.36%; 
} 

.span-2-of-5 { 
    width: 39.04%; 
} 

.span-1-of-5 { 
    width: 18.72%; 
} 


/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 

@media only screen and (max-width: 480px) { 
    .span-5-of-5 { 
     width: 100%; 
    } 
    .span-4-of-5 { 
     width: 100%; 
    } 
    .span-3-of-5 { 
     width: 100%; 
    } 
    .span-2-of-5 { 
     width: 100%; 
    } 
    .span-1-of-5 { 
     width: 100%; 
    } 
} 


/* GRID OF SIX ============================================================================= */ 


.span-6-of-6 { 
    width: 100%; 
} 

.span-5-of-6 { 
    width: 83.06%; 
} 

.span-4-of-6 { 
    width: 66.13%; 
} 

.span-3-of-6 { 
    width: 49.2%; 
} 

.span-2-of-6 { 
    width: 32.26%; 
} 

.span-1-of-6 { 
    width: 15.33%; 
} 


/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 

@media only screen and (max-width: 480px) { 
    .span-6-of-6 { 
     width: 100%; 
    } 
    .span-5-of-6 { 
     width: 100%; 
    } 
    .span-4-of-6 { 
     width: 100%; 
    } 
    .span-3-of-6 { 
     width: 100%; 
    } 
    .span-2-of-6 { 
     width: 100%; 
    } 
    .span-1-of-6 { 
     width: 100%; 
    } 
} 



/* GRID OF SEVEN ============================================================================= */ 


.span-7-of-7 { 
    width: 100%; 
} 

.span-6-of-7 { 
    width: 85.48%; 
} 

.span-5-of-7 { 
    width: 70.97%; 
} 

.span-4-of-7 { 
    width: 56.45%; 
} 

.span-3-of-7 { 
    width: 41.94%; 
} 

.span-2-of-7 { 
    width: 27.42%; 
} 

.span-1-of-7 { 
    width: 12.91%; 
} 


/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 

@media only screen and (max-width: 480px) { 
    .span-7-of-7 { 
     width: 100%; 
    } 
    .span-6-of-7 { 
     width: 100%; 
    } 
    .span-5-of-7 { 
     width: 100%; 
    } 
    .span-4-of-7 { 
     width: 100%; 
    } 
    .span-3-of-7 { 
     width: 100%; 
    } 
    .span-2-of-7 { 
     width: 100%; 
    } 
    .span-1-of-7 { 
     width: 100%; 
    } 
} 


/* GRID OF EIGHT ============================================================================= */ 


.span-8-of-8 { 
    width: 100%; 
} 

.span-7-of-8 { 
    width: 87.3%; 
} 

.span-6-of-8 { 
    width: 74.6%; 
} 

.span-5-of-8 { 
    width: 61.9%; 
} 

.span-4-of-8 { 
    width: 49.2%; 
} 

.span-3-of-8 { 
    width: 36.5%; 
} 

.span-2-of-8 { 
    width: 23.8%; 
} 

.span-1-of-8 { 
    width: 11.1%; 
} 


/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 

@media only screen and (max-width: 480px) { 
    .span-8-of-8 { 
     width: 100%; 
    } 
    .span-7-of-8 { 
     width: 100%; 
    } 
    .span-6-of-8 { 
     width: 100%; 
    } 
    .span-5-of-8 { 
     width: 100%; 
    } 
    .span-4-of-8 { 
     width: 100%; 
    } 
    .span-3-of-8 { 
     width: 100%; 
    } 
    .span-2-of-8 { 
     width: 100%; 
    } 
    .span-1-of-8 { 
     width: 100%; 
    } 
} 


/* GRID OF NINE ============================================================================= */ 


.span-9-of-9 { 
    width: 100%; 
} 

.span-8-of-9 { 
    width: 88.71%; 
} 

.span-7-of-9 { 
    width: 77.42%; 
} 

.span-6-of-9 { 
    width: 66.13%; 
} 

.span-5-of-9 { 
    width: 54.84%; 
} 

.span-4-of-9 { 
    width: 43.55%; 
} 

.span-3-of-9 { 
    width: 32.26%; 
} 

.span-2-of-9 { 
    width: 20.97%; 
} 

.span-1-of-9 { 
    width: 9.68%; 
} 


/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 

@media only screen and (max-width: 480px) { 
    .span-9-of-9 { 
     width: 100%; 
    } 
    .span-8-of-9 { 
     width: 100%; 
    } 
    .span-7-of-9 { 
     width: 100%; 
    } 
    .span-6-of-9 { 
     width: 100%; 
    } 
    .span-5-of-9 { 
     width: 100%; 
    } 
    .span-4-of-9 { 
     width: 100%; 
    } 
    .span-3-of-9 { 
     width: 100%; 
    } 
    .span-2-of-9 { 
     width: 100%; 
    } 
    .span-1-of-9 { 
     width: 100%; 
    } 
} 


/* GRID OF TEN ============================================================================= */ 


.span-10-of-10 { 
    width: 100%; 
} 

.span-9-of-10 { 
    width: 89.84%; 
} 

.span-8-of-10 { 
    width: 79.68%; 
} 

.span-7-of-10 { 
    width: 69.52%; 
} 

.span-6-of-10 { 
    width: 59.36%; 
} 

.span-5-of-10 { 
    width: 49.2%; 
} 

.span-4-of-10 { 
    width: 39.04%; 
} 

.span-3-of-10 { 
    width: 28.88%; 
} 

.span-2-of-10 { 
    width: 18.72%; 
} 

.span-1-of-10 { 
    width: 8.56%; 
} 


/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 

@media only screen and (max-width: 480px) { 
    .span-10-of-10 { 
     width: 100%; 
    } 
    .span-9-of-10 { 
     width: 100%; 
    } 
    .span-8-of-10 { 
     width: 100%; 
    } 
    .span-7-of-10 { 
     width: 100%; 
    } 
    .span-6-of-10 { 
     width: 100%; 
    } 
    .span-5-of-10 { 
     width: 100%; 
    } 
    .span-4-of-10 { 
     width: 100%; 
    } 
    .span-3-of-10 { 
     width: 100%; 
    } 
    .span-2-of-10 { 
     width: 100%; 
    } 
    .span-1-of-10 { 
     width: 100%; 
    } 
} 


/* GRID OF ELEVEN ============================================================================= */ 

.span-11-of-11 { 
    width: 100%; 
} 

.span-10-of-11 { 
    width: 90.76%; 
} 

.span-9-of-11 { 
    width: 81.52%; 
} 

.span-8-of-11 { 
    width: 72.29%; 
} 

.span-7-of-11 { 
    width: 63.05%; 
} 

.span-6-of-11 { 
    width: 53.81%; 
} 

.span-5-of-11 { 
    width: 44.58%; 
} 

.span-4-of-11 { 
    width: 35.34%; 
} 

.span-3-of-11 { 
    width: 26.1%; 
} 

.span-2-of-11 { 
    width: 16.87%; 
} 

.span-1-of-11 { 
    width: 7.63%; 
} 


/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 

@media only screen and (max-width: 480px) { 
    .span-11-of-11 { 
     width: 100%; 
    } 
    .span-10-of-11 { 
     width: 100%; 
    } 
    .span-9-of-11 { 
     width: 100%; 
    } 
    .span-8-of-11 { 
     width: 100%; 
    } 
    .span-7-of-11 { 
     width: 100%; 
    } 
    .span-6-of-11 { 
     width: 100%; 
    } 
    .span-5-of-11 { 
     width: 100%; 
    } 
    .span-4-of-11 { 
     width: 100%; 
    } 
    .span-3-of-11 { 
     width: 100%; 
    } 
    .span-2-of-11 { 
     width: 100%; 
    } 
    .span-1-of-11 { 
     width: 100%; 
    } 
} 


/* GRID OF TWELVE ============================================================================= */ 

.span-12-of-12 { 
    width: 100%; 
} 

.span-11-of-12 { 
    width: 91.53%; 
} 

.span-10-of-12 { 
    width: 83.06%; 
} 

.span-9-of-12 { 
    width: 74.6%; 
} 

.span-8-of-12 { 
    width: 66.13%; 
} 

.span-7-of-12 { 
    width: 57.66%; 
} 

.span-6-of-12 { 
    width: 49.2%; 
} 

.span-5-of-12 { 
    width: 40.73%; 
} 

.span-4-of-12 { 
    width: 32.26%; 
} 

.span-3-of-12 { 
    width: 23.8%; 
} 

.span-2-of-12 { 
    width: 15.33%; 
} 

.span-1-of-12 { 
    width: 6.86%; 
} 


/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 

@media only screen and (max-width: 480px) { 
    .span-12-of-12 { 
     width: 100%; 
    } 
    .span-11-of-12 { 
     width: 100%; 
    } 
    .span-10-of-12 { 
     width: 100%; 
    } 
    .span-9-of-12 { 
     width: 100%; 
    } 
    .span-8-of-12 { 
     width: 100%; 
    } 
    .span-7-of-12 { 
     width: 100%; 
    } 
    .span-6-of-12 { 
     width: 100%; 
    } 
    .span-5-of-12 { 
     width: 100%; 
    } 
    .span-4-of-12 { 
     width: 100%; 
    } 
    .span-3-of-12 { 
     width: 100%; 
    } 
    .span-2-of-12 { 
     width: 100%; 
    } 
    .span-1-of-12 { 
     width: 100%; 
    } 
}

I Ordner mit Beispiel anhängen werden, die im HTML-Editor https://mega.nz/#!fh0zSLQR!sNWr7joNedcOPfmEb9BwCAZdTncizAfm9EsQ7ITh8Zk

Quelle

2017-11-12 Gennady G

geöffnet werden konnte

habe ich gemacht Änderungen in Ihrem benutzerdefinierten Gitter CSS.

Aktualisiert Geige: https://jsfiddle.net/t0g0chrh/3/

/* SECTIONS ============================================================================= */ 
 

 
.section { 
 
\t clear: both; 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
} 
 

 
/* GROUPING ============================================================================= */ 
 

 
.row { 
 
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */ 
 
} 
 

 
.row:before, 
 
.row:after { 
 
    content:""; 
 
    display:table; 
 
} 
 
.row:after { 
 
    clear:both; 
 
} 
 

 
/* GRID COLUMN SETUP ==================================================================== */ 
 

 
.col { 
 
\t display: block; 
 
\t float:left; 
 
\t margin: 1% 0 1% 1.6%; 
 
} 
 

 
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */ 
 

 

 
/* REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */ 
 

 
@media only screen and (max-width: 480px) { 
 
\t .col { 
 
\t \t /*margin: 1% 0 1% 0%;*/ 
 
     margin: 0; 
 
\t } 
 
} 
 

 

 
/* GRID OF TWO ============================================================================= */ 
 

 

 
.span-2-of-2 { 
 
\t width: 100%; 
 
} 
 

 
.span-1-of-2 { 
 
\t width: 49.2%; 
 
} 
 

 
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 
 

 
@media only screen and (max-width: 480px) { 
 
\t .span-2-of-2 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-1-of-2 { 
 
\t \t width: 100%; 
 
\t } 
 
} 
 

 

 
/* GRID OF THREE ============================================================================= */ 
 

 
\t 
 
.span-3-of-3 { 
 
\t width: 100%; 
 
} 
 

 
.span-2-of-3 { 
 
\t width: 66.13%; 
 
} 
 

 
.span-1-of-3 { 
 
\t width: 32.26%; 
 
} 
 

 

 
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 
 

 
@media only screen and (max-width: 480px) { 
 
\t .span-3-of-3 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-2-of-3 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-1-of-3 { 
 
\t \t width: 100%; 
 
\t } 
 
} 
 

 
/* GRID OF FOUR ============================================================================= */ 
 

 
\t 
 
.span-4-of-4 { 
 
\t width: 100%; 
 
} 
 

 
.span-3-of-4 { 
 
\t width: 74.6%; 
 
} 
 

 
.span-2-of-4 { 
 
\t width: 49.2%; 
 
} 
 

 
.span-1-of-4 { 
 
\t width: 23.8%; 
 
} 
 

 

 
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 
 

 
@media only screen and (max-width: 480px) { 
 
\t .span-4-of-4 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-3-of-4 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-2-of-4 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-1-of-4 { 
 
\t \t width: 100%; 
 
\t } 
 
} 
 

 

 
/* GRID OF FIVE ============================================================================= */ 
 

 
\t 
 
.span-5-of-5 { 
 
\t width: 100%; 
 
} 
 

 
.span-4-of-5 { 
 
    \t width: 79.68%; 
 
} 
 

 
.span-3-of-5 { 
 
    \t width: 59.36%; 
 
} 
 

 
.span-2-of-5 { 
 
    \t width: 39.04%; 
 
} 
 

 
.span-1-of-5 { 
 
    \t width: 18.72%; 
 
} 
 

 

 
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 
 

 
@media only screen and (max-width: 480px) { 
 
\t .span-5-of-5 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-4-of-5 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-3-of-5 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-2-of-5 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-1-of-5 { 
 
\t \t width: 100%; 
 
\t } 
 
} 
 

 

 
/* GRID OF SIX ============================================================================= */ 
 

 

 
.span-6-of-6 { 
 
\t width: 100%; 
 
} 
 

 
.span-5-of-6 { 
 
    \t width: 83.06%; 
 
} 
 

 
.span-4-of-6 { 
 
    \t width: 66.13%; 
 
} 
 

 
.span-3-of-6 { 
 
    \t width: 49.2%; 
 
} 
 

 
.span-2-of-6 { 
 
    \t width: 32.26%; 
 
} 
 

 
.span-1-of-6 { 
 
    \t width: 15.33%; 
 
} 
 

 

 
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 
 

 
@media only screen and (max-width: 480px) { 
 
\t .span-6-of-6 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-5-of-6 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-4-of-6 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-3-of-6 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-2-of-6 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-1-of-6 { 
 
\t \t width: 100%; 
 
\t } 
 
} 
 

 

 

 
/* GRID OF SEVEN ============================================================================= */ 
 

 

 
.span-7-of-7 { 
 
\t width: 100%; 
 
} 
 

 
.span-6-of-7 { 
 
\t width: 85.48%; 
 
} 
 

 
.span-5-of-7 { 
 
    \t width: 70.97%; 
 
} 
 

 
.span-4-of-7 { 
 
    \t width: 56.45%; 
 
} 
 

 
.span-3-of-7 { 
 
    \t width: 41.94%; 
 
} 
 

 
.span-2-of-7 { 
 
    \t width: 27.42%; 
 
} 
 

 
.span-1-of-7 { 
 
    \t width: 12.91%; 
 
} 
 

 

 
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 
 

 
@media only screen and (max-width: 480px) { 
 
\t .span-7-of-7 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-6-of-7 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-5-of-7 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-4-of-7 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-3-of-7 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-2-of-7 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-1-of-7 { 
 
\t \t width: 100%; 
 
\t } 
 
} 
 

 

 
/* GRID OF EIGHT ============================================================================= */ 
 

 
\t 
 
.span-8-of-8 { 
 
\t width: 100%; 
 
} 
 

 
.span-7-of-8 { 
 
\t width: 87.3%; 
 
} 
 

 
.span-6-of-8 { 
 
\t width: 74.6%; 
 
} 
 

 
.span-5-of-8 { 
 
\t width: 61.9%; 
 
} 
 

 
.span-4-of-8 { 
 
\t width: 49.2%; 
 
} 
 

 
.span-3-of-8 { 
 
\t width: 36.5%; 
 
} 
 

 
.span-2-of-8 { 
 
\t width: 23.8%; 
 
} 
 

 
.span-1-of-8 { 
 
\t width: 11.1%; 
 
} 
 

 

 
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 
 

 
@media only screen and (max-width: 480px) { 
 
\t .span-8-of-8 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-7-of-8 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-6-of-8 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-5-of-8 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-4-of-8 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-3-of-8 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-2-of-8 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-1-of-8 { 
 
\t \t width: 100%; 
 
\t } 
 
} 
 

 

 
/* GRID OF NINE ============================================================================= */ 
 

 

 
.span-9-of-9 { 
 
\t width: 100%; 
 
} 
 

 
.span-8-of-9 { 
 
\t width: 88.71%; 
 
} 
 

 
.span-7-of-9 { 
 
\t width: 77.42%; 
 
} 
 

 
.span-6-of-9 { 
 
\t width: 66.13%; 
 
} 
 

 
.span-5-of-9 { 
 
\t width: 54.84%; 
 
} 
 

 
.span-4-of-9 { 
 
\t width: 43.55%; 
 
} 
 

 
.span-3-of-9 { 
 
\t width: 32.26%; 
 
} 
 

 
.span-2-of-9 { 
 
\t width: 20.97%; 
 
} 
 

 
.span-1-of-9 { 
 
\t width: 9.68%; 
 
} 
 

 

 
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 
 

 
@media only screen and (max-width: 480px) { 
 
\t .span-9-of-9 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-8-of-9 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-7-of-9 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-6-of-9 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-5-of-9 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-4-of-9 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-3-of-9 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-2-of-9 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-1-of-9 { 
 
\t \t width: 100%; 
 
\t } 
 
} 
 

 

 
/* GRID OF TEN ============================================================================= */ 
 

 

 
.span-10-of-10 { 
 
\t width: 100%; 
 
} 
 

 
.span-9-of-10 { 
 
\t width: 89.84%; 
 
} 
 

 
.span-8-of-10 { 
 
\t width: 79.68%; 
 
} 
 

 
.span-7-of-10 { 
 
\t width: 69.52%; 
 
} 
 

 
.span-6-of-10 { 
 
\t width: 59.36%; 
 
} 
 

 
.span-5-of-10 { 
 
\t width: 49.2%; 
 
} 
 

 
.span-4-of-10 { 
 
\t width: 39.04%; 
 
} 
 

 
.span-3-of-10 { 
 
\t width: 28.88%; 
 
} 
 

 
.span-2-of-10 { 
 
\t width: 18.72%; 
 
} 
 

 
.span-1-of-10 { 
 
\t width: 8.56%; 
 
} 
 

 

 
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 
 

 
@media only screen and (max-width: 480px) { 
 
\t .span-10-of-10 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-9-of-10 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-8-of-10 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-7-of-10 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-6-of-10 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-5-of-10 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-4-of-10 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-3-of-10 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-2-of-10 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-1-of-10 { 
 
\t \t width: 100%; 
 
\t } 
 
} 
 

 

 
/* GRID OF ELEVEN ============================================================================= */ 
 

 
.span-11-of-11 { 
 
\t width: 100%; 
 
} 
 

 
.span-10-of-11 { 
 
\t width: 90.76%; 
 
} 
 

 
.span-9-of-11 { 
 
\t width: 81.52%; 
 
} 
 

 
.span-8-of-11 { 
 
\t width: 72.29%; 
 
} 
 

 
.span-7-of-11 { 
 
\t width: 63.05%; 
 
} 
 

 
.span-6-of-11 { 
 
\t width: 53.81%; 
 
} 
 

 
.span-5-of-11 { 
 
\t width: 44.58%; 
 
} 
 

 
.span-4-of-11 { 
 
\t width: 35.34%; 
 
} 
 

 
.span-3-of-11 { 
 
\t width: 26.1%; 
 
} 
 

 
.span-2-of-11 { 
 
\t width: 16.87%; 
 
} 
 

 
.span-1-of-11 { 
 
\t width: 7.63%; 
 
} 
 

 

 
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 
 

 
@media only screen and (max-width: 480px) { 
 
\t .span-11-of-11 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-10-of-11 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-9-of-11 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-8-of-11 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-7-of-11 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-6-of-11 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-5-of-11 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-4-of-11 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-3-of-11 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-2-of-11 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-1-of-11 { 
 
\t \t width: 100%; 
 
\t } 
 
} 
 

 

 
/* GRID OF TWELVE ============================================================================= */ 
 

 
.span-12-of-12 { 
 
\t width: 100%; 
 
} 
 

 
.span-11-of-12 { 
 
\t width: 91.53%; 
 
} 
 

 
.span-10-of-12 { 
 
\t width: 83.06%; 
 
} 
 

 
.span-9-of-12 { 
 
\t width: 74.6%; 
 
} 
 

 
.span-8-of-12 { 
 
\t width: 66.13%; 
 
} 
 

 
.span-7-of-12 { 
 
\t width: 57.66%; 
 
} 
 

 
.span-6-of-12 { 
 
\t width: 49.2%; 
 
} 
 

 
.span-5-of-12 { 
 
\t width: 40.73%; 
 
} 
 

 
.span-4-of-12 { 
 
\t width: 32.26%; 
 
} 
 

 
.span-3-of-12 { 
 
\t width: 23.8%; 
 
} 
 

 
.span-2-of-12 { 
 
\t width: 15.33%; 
 
} 
 

 
.span-1-of-12 { 
 
\t width: 6.86%; 
 
} 
 

 

 
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 
 

 
@media only screen and (max-width: 480px) { 
 
\t .span-12-of-12 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-11-of-12 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-10-of-12 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-9-of-12 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-8-of-12 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-7-of-12 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-6-of-12 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-5-of-12 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-4-of-12 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-3-of-12 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-2-of-12 { 
 
\t \t width: 100%; 
 
\t } 
 
\t .span-1-of-12 { 
 
\t \t width: 100%; 
 
\t } 
 
} 
 

 

 

 
/* MEDIA.CSS*/ 
 

 
/* small phones to small tyablets 481 to 767 */ 
 
@media only screen and (max-width: 767px) { 
 
    .col { margin: 1% 0 1% 0%; } 
 
    .span-1-of-2 { width: 98%; padding-right: 1%;} 
 
    .span-1-of-4, .span-2-of-4, .span-3-of-4, .span-4-of-4 { width: 48%; } 
 
    .span-1-of-4:nth-child(2n) { 
 
     margin-left: 2%; 
 
    } 
 
} 
 

 
/* small phones 0 to 480 */ 
 
@media only screen and (max-width: 480px) { 
 
\t .col { margin: 1% 1% 1% 0%; } 
 
    .span-1-of-2 { width: 100%; padding-right: 1%;} 
 
    .span-1-of-4, .span-2-of-4, .span-3-of-4, .span-4-of-4 { width: 100%; } 
 
    .span-1-of-4:nth-child(2n) { 
 
     margin-left: 0; 
 
    } 
 
} 
 

 

 
/* STYLE.CSS */ 
 

 
/* -------- REUSABLE COMPONENETS -------- */ 
 
* { 
 
    margin: 0%; 
 
    padding: 0%; 
 
    box-sizing: border-box; 
 
} 
 

 
html { 
 
    background-color: #fff; 
 
    color: #555; 
 
    font-family: 'Lato', 'Arial', sans-serif; 
 
    font-size: 20px; 
 
    font-weight: 300; 
 
    text-rendering: optimizeLegibility; 
 
} 
 

 
.clearfix {zoom: 1;} 
 
.clearfix:after { 
 
    content: ' '; 
 
    clear: both; 
 
    display: block; 
 
    height: 0; 
 
    visibility: hidden; 
 
} 
 

 
/* row class from grid css */ 
 
.row {    
 
    width: 1140px; 
 
\t margin: 0 auto; 
 
} 
 

 
section { 
 
    padding: 80px 0; 
 
} 
 

 
/* class to modify out-of-the-box grid classes (like 'span-1-of-4') */ 
 
.box {    
 
\t 
 
\t background-color: #1ba1e2; 
 
\t border: 1px solid gray; 
 
}

<body> 
 
    <!-- FIRST ROW --> 
 
    <div class="row"> 
 
     <div class="col span-1-of-2 box"> 
 
      <h3>first-row span-1</h3> 
 
     </div> 
 
     <div class="col span-1-of-2 box"> 
 
      <h3>first-row span-2</h3> 
 
     </div> 
 
    </div> 
 

 
    <!-- SECOND ROW --> 
 
    <div class="row"> 
 
     <div class="col span-1-of-4 box"> 
 
      <h3>second-row span-1</h3> 
 
      <p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We 
 
       work with the best chefs in each town to ensure that you're 100% happy.</p> 
 
     </div> 
 
     <div class="col span-1-of-4 box"> 
 
      <h3>second-row span-2</h3> 
 
      <p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We 
 
       work with the best chefs in each town to ensure that you're 100% happy.</p> 
 
     </div> 
 
     <div class="col span-1-of-4 box"> 
 
      <h3>second-row span-3</h3> 
 
      <p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We 
 
       work with the best chefs in each town to ensure that you're 100% happy.</p> 
 
     </div> 
 
     <div class="col span-1-of-4 box"> 
 
      <h3>second-row span-4</h3> 
 
      <p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We 
 
       work with the best chefs in each town to ensure that you're 100% happy.</p> 
 
     </div> 
 
    </div> 
 
</body>

Quelle

2017-11-13 13:09:28

Wow! Sie haben .span-1-of-2 hinzugefügt {Breite: 100%; padding-right: 1%;} und .span-1-of-4: n-te (2n) { margin-left: 0; } - Vielen Dank! :) Jetzt funktioniert wie ein Zauber! :-) –

Responsive Raster, wie Rand zwischen den Spalten hinzufügen?

Antwort

Verwandte Themen