3x3グリッドを作成すると反応がよくなりますか？

Question

trump.comのリンク先ページを3x3グリッドとして再作成しようとしています。

私は、グリッドの2番目のセルを、最初のセルにして、ウェブサイトが反応しやすいようにします。

メディアクエリーを使用してグリッドを相互に変換して全角矩形にするにはどうすればよいのですか。

これは私がこれまで持っているものです。 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プロパティを使用することができますが、あなたはより良いブラウザのサポートが必要な場合は、ここに私の選択肢があります：

FYI

* { 
 
    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

こんにちは、フレキシボックスに役立ちます。

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のあなたの行ことを保証しますアイテムは常に幅全体に渡り、幅が400ピクセルを下回った後に第2のアイテムを第1の位置に移動させる。私はそれがあなたのために働くことを望む。