创建一个响应式的3x3网格？

Question

我正在尝试重新创建trump.com的登录页面，但将其作为3x3网格。

我希望网格的第二个单元格是网站被强制响应时的第一个单元格。

如何将媒体查询的网格更改为相互之间的全宽矩形，以及如何使第二个单元位于第一个单元的顶部，并在第一个单元的下方？

这是我到目前为止有： https://codepen.io/pisoj1/pen/ZpdRMq

.grid3x3 { 
display: inline-block; 
     height:100%; 
     width:100%; 
     position: relative; 
    } 
#overlay-content { 

    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    background: #000; 
    position: absolute; 
    left: 0; 
    top: 0; 
    margin: 0; 
} 
.block { 
    float: left; 
    top: 0; 
    width: 33.3333%; 
    height: 33.3333%; 
    position: relative; 
display: inline-block; 
width: 33.3333%; 
height: 33.3333%; 
box-sizing: border-box; 
padding: 0; 
overflow: hidden; 
background-color: #090909; 
} 

谢谢。

Answer 1

您可以使用flex和order财产，但如果你需要更好的浏览器的支持，这是我的选择：

* { 
 
    box-sizing: border-box 
 
} 
 

 
html,body,main{ 
 
    margin: 0; 
 
} 
 

 
main { 
 
    position: relative; 
 
} 
 

 
div { 
 
    padding: 16px 
 
} 
 

 
div:nth-of-type(1){background:#000;color:#fff} 
 
div:nth-of-type(2){background:orange} 
 
div:nth-of-type(3){background:mediumseagreen} 
 
div:nth-of-type(4){background:purple} 
 
div:nth-of-type(5){background:deepskyblue} 
 
div:nth-of-type(6){background:lime} 
 
div:nth-of-type(7){background:wheat} 
 
div:nth-of-type(8){background:crimson} 
 
div:nth-of-type(9){background:mediumblue} 
 

 
@media (min-width: 768px) { 
 
    html,body,main { height: 100%; } 
 
    div { 
 
    position: absolute; 
 
    } 
 
    div:nth-of-type(1), 
 
    div:nth-of-type(2), 
 
    div:nth-of-type(3) { 
 
    top: 0; 
 
    bottom: 66.6666% 
 
    } 
 
    div:nth-of-type(4), 
 
    div:nth-of-type(5), 
 
    div:nth-of-type(6) { 
 
    top: 33.3333%; 
 
    bottom: 33.3333%; 
 
    } 
 
    div:nth-of-type(7), 
 
    div:nth-of-type(8), 
 
    div:nth-of-type(9) { 
 
    top: 66.6666%; 
 
    bottom: 0; 
 
    } 
 
    div:nth-of-type(2), 
 
    div:nth-of-type(4), 
 
    div:nth-of-type(7) { 
 
    left: 0; 
 
    right: 66.6666% 
 
    } 
 
    div:nth-of-type(3), 
 
    div:nth-of-type(6), 
 
    div:nth-of-type(9){ 
 
    right: 0; 
 
    left: 66.6666% 
 
    } 
 
    div:nth-of-type(1), 
 
    div:nth-of-type(5), 
 
    div:nth-of-type(8) { 
 
    left: 33.3333%; 
 
    right: 33.3333%; 
 
    } 
 
}

<main> 
 
    <div>1 : Title/logo</div> 
 
    <div>2 Expand to 768px to see grid</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
    <div>7</div> 
 
    <div>8</div> 
 
    <div>9</div> 
 
</main>

Codepen

Answer 2

您可以考虑使用显示：弯曲此

.container { 
 
    display: flex; 
 
    width: 100%; 
 
    flex-wrap: wrap; 
 
} 
 
.item { 
 
    width: 30%; 
 
    border: 1px solid black; 
 
    background: green; 
 
    height: 150px; 
 
}

<div class="container"> 
 
    <div class="item">c1</div> 
 

 
    <div class="item">c2</div> 
 

 
    <div class="item">c3</div> 
 

 
    <div class="item">c4</div> 
 

 
    <div class="item">c5</div> 
 

 
    <div class="item">c6</div> 
 

 
    <div class="item">c7</div> 
 
    <div class="item">c8</div> 
 

 
    <div class="item">c9</div> 
 
</div>

希望这有助于

Answer 3

你好，Flexbox的。

This是我的解决方案，基于关闭令人讨厌的代码：

HTML

<div class="container"> 
    <div class="item">c1</div> 

    <div class="item">c2</div> 

    <div class="item">c3</div> 

    <div class="item">c4</div> 

    <div class="item">c5</div> 

    <div class="item">c6</div> 

    <div class="item">c7</div> 
    <div class="item">c8</div> 

    <div class="item">c9</div> 
</div> 

CSS（减去美学）

.container { 
    display: flex; 
    flex-wrap: wrap; 
} 
.item { 
    flex-basis:32%; 
    flex-grow:1; 
    border: 1px solid black; 
    height: 150px; 
} 
@media (max-width:400px) { 
    .item { 
    flex-basis:100%; 
    } 
    .item:nth-of-type(2) { 
    order:-1; 
    } 
} 

它可以确保你的第3行项目将始终跨越整个宽度，并移动您的项目第二个项目在宽度低于400px后进入第一个位置。我希望这个对你有用。