在响应式设计/创建流体网格中的n-child"碰撞"

Question

我的网站有一个网格系统,最初设置了一个应用于网格中每六个项目的样式

li:nth-child(5n+1){ margin-left:0 }

我正在使我的网站响应,我有一个我指定的断点

li:nth-child(3n+1){ margin-left:0 }

但问题是它仍在解释以前的5n + 1风格,这是我不想要的.如何告诉CSS忽略该样式.或者更好的是,我如何创建流体网格,以便每当li项目连续第一个时,它的边距为0,而其他所有项目的边距为25px？

Answer 1

通过在父元素上使用负边距,您可以在不需要媒体查询的情况下响应:

http://codepen.io/cimmanon/pen/dwbHi

.gallery {
  margin: -10px 0 0 -10px;
  overflow: hidden;
}

.gallery img {
    margin: 10px 0 0 10px;
    float: left;
}