Responsive Gitter ohne äußeren Rand

Question

Ich versuche, ein reaktionsfähiges Raster mit CSS zu erstellen, das eine Sammlung von Symbolen/Kacheln durch innere Ränder trennt (siehe Layout unten).

CONTAINER | CONTAINER | CONTAINER 
--------------------------------- 
CONTAINER | CONTAINER | CONTAINER 

Ich habe in der Lage dies mit First-Kind/Last-Kind-Selektoren zu erreichen, aber nicht in einer Weise, die mit zusätzlichen Behältern skaliert und reagiert.

http://codepen.io/patrickabel/pen/VmRyqQ

Gibt es eine Möglichkeit, dies ohne JavaScript zu erreichen?

Answer 1

Es ist nicht 100% klar, was Sie brauchen, aber gibt es einen Grund, keine Tabelle zu verwenden? Etwas wie folgt aus:

td { 
 
    text-align: center; 
 
    padding: 5px; 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
} 
 
table td, table th { 
 
    border: 1px solid black; 
 
} 
 
table tr:first-child td, table tr:first-child th { 
 
    border-top: 0; 
 
} 
 
table tr:last-child td { 
 
    border-bottom: 0; 
 
} 
 
table tr td:first-child, 
 
table tr th:first-child { 
 
    border-left: 0; 
 
} 
 
table tr td:last-child, 
 
table tr th:last-child { 
 
    border-right: 0; 
 
}

<table class="container"> 
 
    <tr class="row"> 
 
    <td>A</td> 
 
    <td>B</td> 
 
    <td>C</td> 
 
    <td>D</td> 
 
    <td>E</td> 
 
    <td>F</td> 
 
    </tr> 
 
    <tr class="row"> 
 
    <td>This</td> 
 
    <td>Is</td> 
 
    <td>A</td> 
 
    <td>Test</td> 
 
    <td>Phrase</td> 
 
    <td>:)</td> 
 
    </tr> 
 
</table>