响应式两列网格

Posted 2023-03-05

技术标签:

【中文标题】响应式两列网格【英文标题】：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 像素之间。我希望两列布局在这些宽度下响应，并根据视口宽度减小两列网格大小。

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

非常感谢您的帮助！

【问题讨论】：

【参考方案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

希望对你有帮助！

【讨论】：

以上是关于响应式两列网格的主要内容，如果未能解决你的问题，请参考以下文章

创建两列响应式 css html 设计，当缩小或在移动设备上查看时合并为 1 列

如何创建响应式（可变列数）Angular-Material 卡片网格

使用 Flex CSS 和 Bootstrap 进行响应式布局

响应式正方形网格内的响应式正方形网格

将响应式菜单分成两列

HTML CSS 响应式地将图像堆叠在两列中