外枠のないレスポンスグリッド

Question

アイコン/タイルの集合を内枠で区切るCSSを使用してレスポンスグリッドを作成しようとしています（下のレイアウトを参照）。

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

私はなく、追加の容器に比例し、応答性のある方法で、この使用して最初の子/最後の子セレクタを達成することができました。

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

JavaScriptをせずにこれを達成する方法はありますか？

Answer 1

あなたが必要とするものは100％明確ではありませんが、テーブルを使用しない理由はありますか？このような何か：

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>