作記録

記憶代わり

レスポンシブ対応で途中の要素だけを横の列に抜き出す

結論

CSS Grid Layout を使うと良さそうな気がする。

参考

developer.mozilla.org

目標

f:id:JTNsaku:20220211222414p:plain

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

f:id:JTNsaku:20220211222502p:plain

コード

レスポンシブ対応を加える前

<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <style>
        body {
            color: white;
        }

        div:not(:first-child) {
            margin-top: 25px;
        }

        .blue {
            width: 100px;
            height: 100px;
            background-color: #2563eb;
            font-size: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .red {
            width: 100px;
            height: 100px;
            background-color:#dc2626;
            font-size: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>

    <title>sample</title>
</head>
<body>
    <div class="wrapper">
        <div class="blue">①</div>
        <div class="red">②</div>
        <div class="blue">③</div>
        <div class="blue">④</div>
    </div>
</body>
</html>

レスポンシブ対応を加えた後

<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <style>
        body {
            color: white;
        }

        div:not(:first-child) {
            margin-top: 25px;
        }

        .blue {
            width: 100px;
            height: 100px;
            background-color: #2563eb;
            font-size: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .red {
            width: 100px;
            height: 100px;
            background-color:#dc2626;
            font-size: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        @media screen and (min-width: 640px) {
            .wrapper {
                display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    grid-row: 3;
            }

            div div:nth-of-type(2) {
                margin-top: 0;
            }

            .red {
                grid-row-start: 1;
                grid-row-end: 4;
            }

            div div:nth-of-type(1) {
                grid-row-start: 1;
                grid-row-end: 2;
            }

            div div:nth-of-type(3) {
                grid-row-start: 2;
                grid-row-end: 3;
            }

            div div:nth-of-type(4) {
                grid-row-start: 3;
                grid-row-end: 4;
            }
        }
    </style>

    <title>sample</title>
</head>
<body>
    <div class="wrapper">
        <div class="blue">①</div>
        <div class="red">②</div>
        <div class="blue">③</div>
        <div class="blue">④</div>
    </div>
</body>
</html>

解説

f:id:JTNsaku:20220211224257p:plain

↑ こういう 2列 × n行 の Grid Layout を作る。

n は、はみ出る要素以外の要素の個数。

後は横にはみ出させたい要素の row（行）の start と end を3行分にする。

それ以外の要素の row（行）の start と end は、1行分ずつに設定する。