响应式两列网格答案

【问题标题】：Responsive two column grid响应式两列网格
【发布时间】：2017-10-13 13:39:28
【问题描述】：

我正在制作一部动画网络漫画，我将为此制作一些不同宽度的动画视频。我的目标是将视频放入两列网格中，如下所示：http://imgur.com/meSTU1u。

我目前正在使用图像而不是视频来处理它，只是想看看它是否会起作用。

我用 flexbox 试过了：https://jsfiddle.net/3zacce6e/5/

使用此标记：

<div class="wrapper">
<div class="flex-container">
  <img class="container-video" src="http://placehold.it/600x250">
  <img class="container-video" src="http://placehold.it/300x250">
  <img class="container-video" src="http://placehold.it/920x300">
  <img class="container-video" src="http://placehold.it/450x250">
  <img class="container-video" src="http://placehold.it/450x250">
  <img class="container-video" src="http://placehold.it/300x300">
  <img class="container-video" src="http://placehold.it/250x300">
  <img class="container-video" src="http://placehold.it/330x300">
  <img class="container-video" src="http://placehold.it/920x350">
  <img class="container-video" src="http://placehold.it/600x250">
  <img class="container-video" src="http://placehold.it/300x250">
</div>
</div>

当您查看视口宽度至少为 934 像素（这是最大的图像加上每边 7 像素的边距）的网格布局时，这看起来正是我想要的方式。然后图像在680px的断点处相互堆叠，这也是我想要的。

我唯一的问题是视口宽度在 680 像素和 934 像素之间。我希望两列布局在这些宽度下响应，并根据视口宽度减小两列网格大小。

有什么方法可以实现我想要的吗？我觉得我错过了一些非常简单的东西......

非常感谢您的帮助！

【问题讨论】：

标签： html css grid flexbox

【解决方案1】：

一个使用 src 属性选择 img 标签的额外断点示例：

.wrapper {
  margin: 0 3vw;
}

.flex-container {
  max-width: 1000px;
  padding: 0;
  margin: auto;
  display: block;
  height: auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  justify-content: center;
}

.container-video {
  margin: 10px;
  max-width: 100%;
  max-height: 100%;
}

@media (max-width: 1018px) {
  .container-video {
    margin: auto auto 20px;
    max-width: 98%;
  }
  .container-video[src*="/600"] {
    max-width: 63%;
  }
  .container-video[src*="/450"] {
    max-width: 48%;
  }
  .container-video[src*="/300"] {
    max-width: 31%;
  }
  .container-video[src*="/330"] {
    max-width: 33%;
  }
  .container-video[src*="/250"] {
    max-width: 23%;
  }
}

@media (max-width: 680px) {
  .container-video[src*="/"] {
    max-width: 100%;
    width: 100%;
    height: 100%;
    margin: 0 0 20px;
  }
}

<div class="wrapper">
  <div class="flex-container">
    <img class="container-video" src="http://placehold.it/600x250">
    <img class="container-video" src="http://placehold.it/300x250">
    <img class="container-video" src="http://placehold.it/920x300">
    <img class="container-video" src="http://placehold.it/450x250">
    <img class="container-video" src="http://placehold.it/450x250">
    <img class="container-video" src="http://placehold.it/300x300">
    <img class="container-video" src="http://placehold.it/250x300">
    <img class="container-video" src="http://placehold.it/330x300">
    <img class="container-video" src="http://placehold.it/920x350">
    <img class="container-video" src="http://placehold.it/600x250">
    <img class="container-video" src="http://placehold.it/300x250">
  </div>
</div>

这种结构很容易，因为可以很容易地从 src uri 本身检索大小。

另一种方法是通过order 对它们重新排序，然后只调整其中几个的大小，或者将它们全部调整为 max-width:xx%

  .wrapper {
  margin: 0 3vw;
}

.flex-container {
  max-width: 1000px;
  padding: 0;
  margin: auto;
  display: block;
  height: auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  justify-content: center;
}

.container-video {
  margin: 10px;
  max-width: 100%;
  max-height: 100%;
}

@media (max-width: 1018px) {
  .container-video {
    margin: auto;
    border: 5px solid transparent;
    box-sizing: border-box;
    max-width: 45%;
  }
  @media (max-width: 680px) {
    .container-video[src*="/"] {
      max-width: 100%;
      width: 100%;
      height: 100%;
      margin: 0 0 20px;
    }
  }

<div class="wrapper">
  <div class="flex-container">
    <img class="container-video" src="http://placehold.it/600x250">
    <img class="container-video" src="http://placehold.it/300x250">
    <img class="container-video" src="http://placehold.it/920x300">
    <img class="container-video" src="http://placehold.it/450x250">
    <img class="container-video" src="http://placehold.it/450x250">
    <img class="container-video" src="http://placehold.it/300x300">
    <img class="container-video" src="http://placehold.it/250x300">
    <img class="container-video" src="http://placehold.it/330x300">
    <img class="container-video" src="http://placehold.it/920x350">
    <img class="container-video" src="http://placehold.it/600x250">
    <img class="container-video" src="http://placehold.it/300x250">
  </div>
</div>

对于较年轻的浏览器，您可以使用grid CSS

.wrapper {
  margin: 0 3vw;
}

.flex-container {
  max-width: 1000px;
  padding: 0;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  grid-auto-rows: minmax(50px, auto);
  grid-gap:10px;
}


.container-video {
 margin:10px auto;
 width:100%;

}

.container-video[src*="/920"] {
  grid-column: auto / span 18;
}

.container-video[src*="/600"] {
  grid-column: auto / span 12;
}

.container-video[src*="/450"] {
  grid-column: auto / span 9;
}

.container-video[src*="/300"] {
  grid-column: auto / span 6;
}

.container-video[src*="/330"] {
  grid-column: auto/ span 7;
}

.container-video[src*="/250"] {
  grid-column: auto/ span 4;
}


}
@media (max-width: 680px) {
  .flex-container {
    display: block
  }
  
  .container-video {
    margin: 5px;
  }
}

<div class="wrapper">

  <div class="flex-container">
    <img class="container-video" src="http://placehold.it/600x250">
    <img class="container-video" src="http://placehold.it/300x250">
    <img class="container-video" src="http://placehold.it/920x300">
    <img class="container-video" src="http://placehold.it/450x250">
    <img class="container-video" src="http://placehold.it/450x250">
    <img class="container-video" src="http://placehold.it/300x300">
    <img class="container-video" src="http://placehold.it/250x300">
    <img class="container-video" src="http://placehold.it/330x300">
    <img class="container-video" src="http://placehold.it/920x350">
    <img class="container-video" src="http://placehold.it/600x250">
    <img class="container-video" src="http://placehold.it/300x250">
  </div>
</div>

【讨论】：

【解决方案2】：

我将为每个实际行创建行并使其成为flex。并将图像包装在一个 div 中，因为作为 flex 子项的图像会拉伸并做出奇怪的反应。

.wrapper {
  margin: 0 3vw;
}

.container {
  max-width: 1000px;
  margin: auto;
}

.container-video {
  max-width: 100%;
  display: block;
}

.row {
  display: flex;
}

.row > div {
  padding: 10px;
}

<div class="wrapper">
  <div class="container">
    <div class="row">
      <div>
        <img class="container-video" src="http://placehold.it/600x250">
      </div>
      <div>
        <img class="container-video" src="http://placehold.it/300x250">
      </div>
    </div>
    <div class="row">
      <div>
        <img class="container-video" src="http://placehold.it/920x300">
      </div>
    </div>
    <div class="row">
      <div>
        <img class="container-video" src="http://placehold.it/450x250">
      </div>
      <div>
        <img class="container-video" src="http://placehold.it/450x250">
      </div>
    </div>
    <div class="row">
      <div>
        <img class="container-video" src="http://placehold.it/300x300">
      </div>
      <div>
        <img class="container-video" src="http://placehold.it/250x300">
      </div>
      <div>
        <img class="container-video" src="http://placehold.it/330x300">
      </div>
    </div>
    <div class="row">
      <div>
        <img class="container-video" src="http://placehold.it/920x350">
      </div>
    </div>
    <div class="row">
      <div>
        <img class="container-video" src="http://placehold.it/600x250">
      </div>
      <div>
        <img class="container-video" src="http://placehold.it/300x250">
      </div>
    </div>
  </div>
</div>

【讨论】：

非常感谢，这看起来很完美！我现在唯一的问题是让图像堆叠在彼此下方的媒体查询不再起作用（请参见此处：jsfiddle.net/qzz1khf4/1）。我是否可能需要放置与 .container-video 不同的选择器？
您，先生，是我的新宠！这正是我一直在寻找的。非常感谢，感谢您的帮助！
我想知道最后一件事。使用我上面一直使用的标记创建这样的东西是不可能的：imgur.com/CTD6CH9？如果我在一行中有三张图像，它们会自动堆叠在一起，如下所示：jsfiddle.net/qzz1khf4/4。我猜右边的两张图片不可能相互堆叠？
所以它确实有效！我已经尝试这样做很长时间了。太感谢了！我意识到现在媒体查询不再起作用了。有办法解决吗？
这很奇怪，我刚刚意识到，当我将之前的代码与其他媒体查询一起使用时，它确实有效，但使用 jsfiddle 却不起作用。但是您的解决方案同样有效！这是我的最后一个问题，非常感谢您的帮助！

【解决方案3】：

您可以通过多种方式实现您的结果。其中之一是通过将Media queries 添加到您的css 以在宽度之间重新设置样式。简短的例子：

@media screen and (min-width: 680px) and (max-width: 934px) {
   /* Extra CSS for styling the video's. */
   /* Example
     img.container-video {
      width: 50%;
}
}

实现目标的第二个例子是使用bootstrap columns 请看下面的例子：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-8">
            <!-- img -->
        </div>
        <div class="col-lg-4">
            <!-- img -->
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <!-- img -->
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <!-- img -->
        </div>
        <div class="col-lg-6">
            <!-- img -->
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4">
            <!-- img -->
        </div>
        <div class="col-lg-8">
            <!-- img -->
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <!-- img -->
        </div>
    </div>
    <div class="row">
        <div class="col-lg-7">
            <!-- img -->
        </div>
        <div class="col-lg-5">
            <!-- img -->
        </div>
    </div>
</div>

有关引导程序的更多信息：more

希望对你有帮助！

【讨论】：