創建一個具有響應能力的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

您可以考慮為此使用display：flex

 .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 2

您好， flexbox。

這是我的解決方案，基於Geeky的代碼：

的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個項目行始終覆蓋整個寬度，並在寬度低於400像素后將第二個項目移到第一個位置。 我希望這個對你有用。

Answer 3

您可以使用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> 

碼筆