javascript - 没有外边框的响应式网格

Question

我正在尝试使用 CSS 创建一个响应式网格，该网格通过内部边框分隔图标/图 block 的集合(请参见下面的布局)。

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

我已经能够使用 first-child/last-child 选择器来实现这一点，但不是以一种可以随其他容器扩展和响应的方式。

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>