文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在小屏幕上折叠成单列的复杂网格布局

问在小屏幕上折叠成单列的复杂网格布局
EN

Stack Overflow用户
提问于 2021-05-10 21:43:05
回答 3查看 59关注 0票数 0

在下面的代码中，我试图实现一个只在右下角由2行3个图像组成的网格。网格不应该比其他季度更大。换句话说，我希望每个季度都是相同的大小，但右下角应该有这2行3个图像。

我的主要目标是有一种方法，可以在小屏幕上折叠成一列，图像堆叠在一起。所以在小屏幕上，不应该有更多的网格，而只有三个季度以下的一列图像：

在正常屏幕上：

代码语言：javascript
复制
| Hello World   |      2      |
|               |             |

|     3         | img img img |
|               | img img img |

在小屏幕上：

代码语言：javascript
复制
Hello World
2
3
img
img
img
img
img
img

这是我的代码，它不能工作...

代码语言：javascript
复制
<!DOCTYPE html>
<html>
<head>
<style>
.box.md {
  grid-column: span 2;
  grid-row: span 2;
}
.box.lg {
  grid-column: span 2;
  grid-row: span 2;
}

.container {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: 240px;
  grid-auto-flow: dense;
  grid-gap: 8px;
}


.box {
  background: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  font-weight: bold;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

</style>
</head>
<body>

<h1>Test:</h1>


<div class="container">
  <div class="box md">
   <p> Hello World </p>
  </div>
  <div class="box md">2</div>
</div>
<div class="container">
  <div class="box md">3</div>

    <div class="container">
      <div class="row" >
        <div class="grid-container">
          <div class="item1">
            <a><img src="AI.jpg"></a>
          </div>
          <div class="item2">
            <a><img src="AI.jpg"></a>
          </div>
          <div class="item3">
            <a><img src="AI.jpg"></a>
          </div>
          <div class="item4">
            <a><img src="AI.jpg"></a>
          </div>
          <div class="item5">
            <a><img src="AI.jpg"></a>
          </div>
          <div class="item6">
            <a><img src="AI.jpg"></a>
          </div>
        </div>
      </div>
    </div>
 </div>

​

代码语言：javascript
复制
.box.md {
  grid-column: span 2;
  grid-row: span 2;
}

.box.lg {
  grid-column: span 2;
  grid-row: span 2;
}

.container {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: 240px;
  grid-auto-flow: dense;
  grid-gap: 8px;
}

.box {
  background: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  font-weight: bold;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}
代码语言：javascript
复制
<h1>Test:</h1>


<div class="container">
  <div class="box md">
    <p> Hello World </p>
  </div>
  <div class="box md">2</div>
</div>
<div class="container">
  <div class="box md">3</div>

  <div class="container">
    <div class="row">
      <div class="grid-container">
        <div class="item1">
          <a><img src="AI.jpg"></a>
        </div>
        <div class="item2">
          <a><img src="AI.jpg"></a>
        </div>
        <div class="item3">
          <a><img src="AI.jpg"></a>
        </div>
        <div class="item4">
          <a><img src="AI.jpg"></a>
        </div>
        <div class="item5">
          <a><img src="AI.jpg"></a>
        </div>
        <div class="item6">
          <a><img src="AI.jpg"></a>
        </div>
      </div>
    </div>
  </div>
</div>

​

有人能帮我解决这个问题吗？

致以亲切的问候，

-Pierre。

css
html
EN

回答 3

Stack Overflow用户

发布于 2021-05-10 23:02:46

结合使用flex和wrap来布局你的主“网格”。使用带有自动调整列的grid对图片进行布局。

我这么做是因为我想你想要一个流畅的布局。使用媒体查询来适应任何屏幕都会容易得多。

您应该在全屏模式下尝试该代码片段，并使用不同大小的窗口进行测试。通过更改.grid-container的minmax(240px, 1fr)中的像素大小，图片布局可以适合您的要求。

​

代码语言：javascript
复制
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.container > * {
  flex: 1;
  min-width: 300px;
  min-height: 250px;
}

.box {
  background: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  font-weight: bold;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: minmax(120px, max-content);
  gap: .5rem;
  padding: .5rem;
}

.grid-container a {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 100%;
  max-width: 100%;
}

.grid-container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}
代码语言：javascript
复制
<h1>Test:</h1>


<div class="container">
  <div class="box md">
    <p> Hello World </p>
  </div>
  <div class="box md">2</div>
</div>
<div class="container">
  <div class="box md">3</div>

  <div class="container">
    <div class="row">
      <div class="grid-container">
        <div class="item1">
          <a><img src="https://picsum.photos/seed/pic1/300/200"></a>
        </div>
        <div class="item2">
          <a><img src="https://picsum.photos/seed/pic2/300/200"></a>
        </div>
        <div class="item3">
          <a><img src="https://picsum.photos/seed/pic3/300/200"></a>
        </div>
        <div class="item4">
          <a><img src="https://picsum.photos/seed/pic4/300/200"></a>
        </div>
        <div class="item5">
          <a><img src="https://picsum.photos/seed/pic5/300/200"></a>
        </div>
        <div class="item6">
          <a><img src="https://picsum.photos/seed/pic6/300/200"></a>
        </div>
      </div>
    </div>
  </div>
</div>

​

票数 1
EN

Stack Overflow用户

发布于 2021-05-11 03:46:28

您可以尝试使用calc()和clamp()为您的列提供一个clamp值，这取决于初始化计算的设置值( minmax() ())；以及未知值为100vw。当calc()函数随着视区的宽度更新时，它允许您设置min和max-width。它可以给出一个失败值(如果计算结果小于0)。

一旦你理解了它是如何工作的，你就可以使用你自己的值来重置你的断点，而不需要媒体，而是自动适应。

示例将每个项设置为容器的直接子项，并使用具有不同calc(clamp())设置的嵌套网格：

​

代码语言：javascript
复制
* {box-sizing:border-box;}
.container {
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(clamp(calc(((200px + 50vw ) * 2 ) - 100vw ), 40vw, 100% )  ,1fr));
  gap:1em;
  width:100%;
}
.box.md {
 max-width:100%;
  border:solid; 
  color:red;
  justify-content:space-around;
}
.box.md.img {
  width: 100%;
  grid-template-columns: repeat(auto-fit,minmax(calc(((140px + 25vw) * 2) - 50vw) ,1fr));
 
}
.box.md.img img {
  width:100%;
}
代码语言：javascript
复制
<h1>Test: grid layout</h1>
<div class="container">
  <div class="box md">
    <p> Hello World </p>
  </div>
  <div class="box md">2</div>
  <div class="box md">3</div>
  <div class="box md img container">
    <div class="item1 box img ">
      <a><img src="https://dummyimage.com/200x100/&text=AI.jpg"></a>
    </div>
    <div class="item2 box img">
      <a><img src="https://dummyimage.com/200x100/&text=AI.jpg"></a>
    </div>
    <div class="item3  box img">
      <a><img src="https://dummyimage.com/200x100/&text=AI.jpg"></a>
    </div>
    <div class="item4 box img">
      <a><img src="https://dummyimage.com/200x100/&text=AI.jpg"></a>
    </div>
    <div class="item5 box img">
      <a><img src="https://dummyimage.com/200x100/&text=AI.jpg"></a>
    </div>
    <div class="item6 box img">
      <a><img src="https://dummyimage.com/200x100/&text=AI.jpg"></a>
    </div>
  </div>
</div>

​

可玩的笔：https://codepen.io/gc-nomade/pen/PopPNoJ

票数 1
EN

Stack Overflow用户

发布于 2021-05-10 22:03:28

看看这是否对图像网格有帮助

​

代码语言：javascript
复制
.container {
  display: grid;
  grid: auto auto/ 1fr 1fr 1fr;
}

@media (max-width: 450px) {
  .container {
    grid: auto / auto;
    grid-auto-flow: row;
  }
}
代码语言：javascript
复制
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

​

}

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/67471590

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档