仅在内部带有边框的响应式网格答案

【问题标题】：Responsive Grid with Borders on the Inside Only仅在内部带有边框的响应式网格
【发布时间】：2015-02-22 06:11:16
【问题描述】：

我正在尝试创建一个仅在内部 div 上有边框的响应式网格。

我通过对除最后一个没有边框的每个 div 使用border-right 来做到这一点。当我使用媒体查询来更改框的宽度，移动页面上的框位置时，问题就出现了，最后一个 div 成为下一行的第一个 div，所以它缺少边框。

HTML：

<div class = "box">
    <p>Box 1</p>
</div>

<div class = "box even">
    <p>Box 2</p>
</div>

<div class = "box">
    <p>Box 3</p>
</div>

<div class = "box last even">
    <p>Box 4</p>
</div>

<div class = "box">
    <p>Box 1</p>
</div>

<div class = "box even">
    <p>Box 2</p>
</div>

<div class = "box">
    <p>Box 3</p>
</div>

<div class = "box last even">
    <p>Box 4</p>
</div>

CSS：

.box {
    float: left;
    width: 25%;
    height: 300px;
    text-align: center;
    border-right: 1px solid black;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;   
    box-sizing: border-box; 
}

.box.last {
     border: none;
}

@media screen and (max-width: 600px) {
    .box {
        width: 33.3333333333%;
    }

    .box.last {
        border-right: 1px solid black;
    }
}

@media screen and (max-width: 450px) {
    .box {
        width: 50%;
    }

    .box.even {
        border: none;
    }
}

@media screen and (max-width: 300px) {
    .box {
        width: 100%;
        border: none;
    }
}

在 600 像素以上，方框为 25%（因此四个并排）。

在 450 像素时，框为 50%，添加一个新类就可以了。但这对于奇数来说变得很棘手。所以在 451 - 600 像素，33.3% 的盒子，我错过了边框。

有谁知道如何让这件事变得简单吗？还是我的整个方法都错了？

谢谢！

【问题讨论】：

标签： css responsive-design grid border

【解决方案1】：

你不需要偶数和最后一堂课。 nth-child() 可以解决问题。

http://jsfiddle.net/dzyyubz6/1/

<div class = "box">
    <p>Box 1</p>
</div>

<div class = "box">
    <p>Box 2</p>
</div>

<div class = "box">
    <p>Box 3</p>
</div>

<div class = "box">
    <p>Box 4</p>
</div>

<div class = "box">
    <p>Box 1</p>
</div>

<div class = "box">
    <p>Box 2</p>
</div>

<div class = "box">
    <p>Box 3</p>
</div>

<div class = "box">
    <p>Box 4</p>
</div>

.box {
    float: left;
    width: 25%;
    height: 300px;
    text-align: center;
    border-right: 1px solid black;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;   
    box-sizing: border-box; 
}
.box:nth-child(4n + 4){
    border: none;
}

@media screen and (max-width: 600px) {
    .box {
        width: 33.3333333333%;
    }
    .box:nth-child(4n + 4){
        border-right: 1px solid black;
    }
    .box:nth-child(3n + 3){
        border: none;
    }
}

@media screen and (max-width: 450px) {
    .box {
        width: 50%;
    }
     .box:nth-child(3n + 3){
        border-right: 1px solid black;
    }
     .box:nth-child(2n + 2){
        border: none;
    }
}

@media screen and (max-width: 300px) {
    .box {
        width: 100%;
        border: none !important;
    }
}

【讨论】：

非常感谢！我什至不知道 nth-child 功能！非常感谢。
如果您单击我的答案旁边的勾号，我将不胜感激。 :)
请注意，IE

【解决方案2】：

这个想法只有在您可以使用新的css-grid 规则集时才有效。假设您可以（浏览器支持明智），您可以通过将grid-gap 与绘制的底层绝对定位元素相结合来创建内边框，该元素在实际单元格下方偏移以创建边框错觉。

优点

自适应，即使你没有足够的元素来填满整行，也只有现有的元素会有边框
根本没有特定的nth-child css 目标。更改网格行数不会影响边框。
边界不会发生冲突或合并以创建比预期更粗的边界

缺点

需要css-grid 才能工作
（就本示例而言）删除网格上需要overflow: hidden 的外边缘边框（上/右/下/左）

HTML

<div class="grid">
  <div class="grid-cell">
    <div class="cell-content">1</div>
  </div>
<div>

CSS/SCSS

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  // prevents ::before borders from looking offset if not enough cells 
  grid-gap: 1px;
  // remove the edge borders
  overflow: hidden;
}

.grid-cell {
  position: relative;
}

// create the illusion of a border
.grid-cell::before {
  content: '';
  position: absolute;
  // match the grid gap for border thickness
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  // this becomes the border, and handles overlap
  background-color: #ddd;
}

.cell-content {
  position: relative;
  // fill in the cell color
  background-color: #fff;
}

Fiddle

【讨论】：