並んで写真のテキストグリッドをレイアウトする方法

Question

モックアップで見られるレイアウトを得るための助けを探しています。私は3x2グリッドのテキストイメージ、イメージテキスト、テキストイメージをモバイル上に積み重ねたい。それぞれの画像は斜めに触れる必要があります。これを達成する最良の方法は何でしょうか？ モックアップ

おかげ

Answer 1

これを行う方法はいくつかあります。私の解決策はCSSグリッドを使用することです。これは非常にクリーンなアプローチです（IE11にはもう少しハンドホールディングが必要です）。

次のスニペットには、2つの列を表示するためのデスクトップサイズのブレークポイントがあり、その下にあるものはスタックされています。

HTML

<article> 
    <div class="text">Text 
    </div> 
    <div class="image">Image 
    </div> 
    <div class="text">Text 
    </div> 
    <div class="image">Image 
    </div> 
    <div class="text">Text 
    </div> 
    <div class="image">Image 
    </div> 
</article> 

CSS

article { 
    display: grid; 
    grid-template-columns: 1; 
    grid-auto-rows: minmax(100px, auto); 
    background: grey; 
} 
.image, 
.text { 
    background: red; 
    height: 100px; 
} 
.image { 
    background: green; 
} 
.text:nth-of-type(3) { 
    background: magenta; 
} 
.image:nth-of-type(4) { 
    background: blue; 
} 
@media screen and (min-width: 1025px) { 
    article { 
     display: grid; 
     grid-template-columns: repeat(2, 1fr); 
     background: grey; 
    } 
    .text:nth-of-type(3) { 
     grid-column: 2; 
     grid-row: 2; 
    } 
} 

Codepen

https://codepen.io/sassquad/pen/ooLEOa