使窗口变小时，如何使四个响应子项更改为 2 x 2 网格? [英] How can I make four responsove children that change to a 2 by 2 grid when making the window smaller?

查看：39
本文介绍了使窗口变小时，如何使四个响应子项更改为 2 x 2 网格?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述


我想创建四个彼此相邻的孩子.现在，当视口宽度变小时，它们应该会折叠成两个乘两个网格.(不太重要:当它变得更小时，它们将是父级宽度的 100%.)现在我的问题不是用媒体查询创建它.问题是第一个孩子的身高比第二个孩子的身高大.当它们折叠成 2 x 2 网格时，第三个孩子总是放在第二个孩子的下方，而不是(我希望它是这样)在第一个孩子的下方.
我也尝试过 flexbox，但据我所知，不可能将其设为 4 x 1、2 x 2 或 1 x 4.该问题仅出现在某些特定的视口宽度中，因为行数是(在某些情况下)情况)在第一个和第二个孩子中相等.
为了明白我的意思，这里是一个片段:

*{填充:0px；边距:0px；}#父母{宽度:960px；最大宽度:90%；字体大小:1rem；保证金:自动；背景颜色:绿色；}.孩子{宽度:23%；边距:0px 1%；背景颜色:黄色；向左飘浮;}@media(最大宽度:60rem){.孩子{宽度:46%；保证金:2%；向左飘浮;}}@media(最大宽度:30rem){.孩子{宽度:100%；边距:0；浮动:无；}}

<div class="child"><h1>Lorem ipsum</h1><p>Lorem ipsum dolor sat amet, consetetur sadipscing elitr, sed</p>
<div class="child"><h1>Lorem ipsum</h1><p>Lorem ipsum dolor sat amet, consetetur sadipscing</p>

<div class="child"><h1>Lorem ipsum</h1><p>Lorem ipsum dolor sat amet, consetetur</p>

<div class="child"><h1>Lorem ipsum</h1><p>Lorem ipsum dolor sat amet</p>

解决方案

您可以使用网格来做到:

* {margin: 0;填充:0；框尺寸:边框框}#父母{显示:网格；网格模板列:重复(4，1fr)；/* 4 x 25%/也可以使用 1fr 1fr 1fr 1fr 或 25% 25% 25% 25%，不用repeat()，fr代表分数*/网格间距:10px；/* 10px 子元素之间的水平和垂直间隙 */宽度:960px；最大宽度:90%；字体大小:1rem；保证金:自动；背景:绿色；}.child {背景:黄色}@media(最大宽度:60rem){#父母{网格模板列:重复(2，1fr)；/* 2 x 50%/也可以使用 1fr 1fr 或 50% 50%，不用 repeat() */}}@media(最大宽度:30rem){#父母{网格模板列:1fr；/* 1 x 100%/也可以使用 100% */}}

<div class="child"><h1>Lorem ipsum</h1><p>Lorem ipsum dolor sat amet, consetetur sadipscing elitr, sed</p>
<div class="child"><h1>Lorem ipsum</h1><p>Lorem ipsum dolor sat amet, consetetur sadipscing</p>

<div class="child"><h1>Lorem ipsum</h1><p>Lorem ipsum dolor sat amet, consetetur</p>

<div class="child"><h1>Lorem ipsum</h1><p>Lorem ipsum dolor sat amet</p>


I want to create four children that are next to each other. Now, when the viewport-width gets smaller, these are supposed to collaps to a two by two grid. (Less important: When it gets even smaller they shall be 100% of the parent's width.) Now my problem is not to create this with media queries. The problem is that the first child has a bigger height than the height of the second child. When they collaps to a 2 by 2 grid the third child is always placed below the second child and not (how I want it to be) below the first.
I've also tried flexbox but as far as I know there is no possibility to make it either 4 by 1, 2 by 2 or 1 by 4. The problem only occurs in some specific viewport widths because the number of lines is (in some situations) equal in the first and second child.
To see what I mean, here is a snippet:

*{
  padding: 0px;
  margin: 0px;
}

#parent{
  width: 960px;
  max-width: 90%;
  font-size: 1rem;
  margin: auto;
  background-color: green;
}

.child{
  width: 23%;
  margin: 0px 1%;
  background-color: yellow;
  float: left;
}

@media (max-width: 60rem){
  .child{
    width: 46%;
    margin: 2%;
    float: left;
  }
}

@media (max-width: 30rem){
  .child{
    width: 100%;
    margin: 0;
    float: none;
  }
}

<div id="parent">
  <div class="child">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed</p>
  </div>
  <div class="child">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing</p>
  </div>
  <div class="child">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consetetur</p>
  </div>
  <div class="child">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</div>

解决方案

You can do it with the Grid:

* {margin: 0; padding: 0; box-sizing: border-box}

#parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 x 25% / can also use 1fr 1fr 1fr 1fr or 25% 25% 25% 25%, without the repeat(), fr stands for fraction */
  grid-gap: 10px; /* 10px horizontal and vertical gap between child elements */
  width: 960px;
  max-width: 90%;
  font-size: 1rem;
  margin: auto;
  background: green;
}

.child {background: yellow}

@media (max-width: 60rem){
  #parent {
    grid-template-columns: repeat(2, 1fr); /* 2 x 50% / can also use 1fr 1fr or 50% 50%, without the repeat() */
  }
}

@media (max-width: 30rem){
  #parent {
    grid-template-columns: 1fr; /* 1 x 100% / can also use 100% */
  }
}

<div id="parent">
  <div class="child">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed</p>
  </div>
  <div class="child">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing</p>
  </div>
  <div class="child">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consetetur</p>
  </div>
  <div class="child">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</div>

这篇关于使窗口变小时，如何使四个响应子项更改为 2 x 2 网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆