見出し画像

お手軽：CSSのグリッドレイアウト

高菜こんぶ

グリッドレイアウトとは？

グリッドレイアウトというのは要素をタイルのように並べて表示出来る技術です
行と列を指定し、その中でどのように要素を割り当てるかで決まります
いわば表みたいなものですね
縦(row)、横(colmun)を指定して表示するというものです
まずは簡単な物を書いていきましょう

雛形の用意

HTMLとCSSの雛形を用意しました
ここはコピペしていただいて構いません
このCSSはテキストを中央揃えにしたり余白を取ったりしています

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高菜こんぶのお手軽プログラミング部屋</title>
</head>

<style>
    .content {
        margin: 30px;

    }

    .items {
        text-align: center;
        padding: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .item1 {
        background-color: #bfff7f;
    }

    .item2 {
        background-color: #7fffff;
        
    }

    .item3 {
        background-color: #ce9eff;
    }

    .item4 {
        background-color: #ff9e9e;
        
    }

    .item5 {
        background-color: #ffff99;
        
    }

    .item6 {
        background-color: #ff89ff;
    }
    .item7 {
        background-color: #ffc68e;
    }
    .item8 {
        background-color: #88bfbf;
        
    }
    .item9 {
        background-color: #a1d8e6;
    }

   
</style>

<body>
    <div class="content">
        <div class="items item1">
            <p>1</p>
        </div>
        <div class="items item2">
            <p>2</p>
        </div>
        <div class="items item3">
            <p>3</p>
        </div>
        <div class="items item4">
            <p>4</p>
        </div>
        <div class="items item5">
            <p>5</p>
        </div>
        <div class="items item6">
            <p>6</p>
        </div>
        <div class="items item7">
            <p>7</p>
        </div>
        <div class="items item8">
            <p>8</p>
        </div>
        <div class="items item9">
            <p>9</p>
        </div>
    </div>
</body>

</html>


こんな感じのものが仕上がってると思います

簡単なものから挑戦

それではまずはこのような画面を目指します

それではCSSを書いていきましょう！

.content {
    margin: 30px;
    /* ここから追加 */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 10px;
    column-gap: 10px;
}

では実行すると

こうなりましたね
では解説

display: grid;

これでグリッドを使用することを宣言しています

grid-template-columns: 1fr 1fr 1fr;

これはカラム数をどの割合で表示するかを指定しています
これは「1：1：1」の割合で3列表示を意味しています
3つ書いてるから3列ということ
このあたりは次の項目でしっかり見てみましょう

row-gap: 10px;
column-gap: 10px;

次にこちら
・1行目が行の余白
・2行目が列の余白
を指定しています
これがなかったら要素同士はくっつきますのでそうしたい場合は設定しないようにしてください

割合を変更してみる

割合の部分を少し変更してみましょう
今度はこのように書いてみてください

.content {
    margin: 30px;
    display: grid;
    /* ここを変更 */
    grid-template-columns: 1fr 2fr 1fr;
    row-gap: 10px;
    column-gap: 10px;
}

このようになりました
1：2：1で割合を取った結果です

複雑な物を作ってみる

次に目指すのはこちら

ではやっていく前に少しこちらを実行してください

.content {
    margin: 30px;
    display: grid;
    /*ここを変更*/
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 10px;
    column-gap: 10px;
}

.items {
    text-align: center;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item1 {
    /**/
    background-color: #bfff7f;
    /*ここを追加*/
    grid-column-start: 1;
    grid-column-end: 4;
}

このように形が変わりましたね
これは.item1に個別でサイズを指定しています
colmunの開始位置を1から初めて終了位置を4に設定しています
3列と指定しているのに「4」って？？
と思われるでしょう
指定方法はこのようになっています

この黒い縦棒が左から1番目、2番目…となってます
ですので終了位置を一番端にしたい場合は列数+1するとOKですね
ちなみに縦に変更したい場合はこうします

.item1 {
    background-color: #bfff7f;
    grid-row-start: 1;
    grid-row-end: 5;
}

これでOKですね
では先程の複雑なものも作っていきましょう

.content {
    margin: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    row-gap: 10px;
    column-gap: 10px;
}

.items {
    text-align: center;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item1 {
    background-color: #bfff7f;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 6;
}

.item2 {
    background-color: #7fffff;
    grid-row-start: 1;
    grid-row-end: 3;

}



.item5 {
    background-color: #ffff99;
    grid-column-start: 3;
    grid-column-end: 5;

}

画面幅によっては多少形は違いますがグリッドはこの様になっているはずです

スマホで見たらグリッド解除

最後にこれだけしておきましょうか
小さい画面でこのグリッドを見るとしんどいですから
CSSの最後にこれを付け加えます


@media screen and (max-width: 650px) {
    .content {
        display: block;
    }
}

これは画面幅が650以下になった時に.contentをgridでは無くblockに変更しています

画面を小さくするとこのようになります

最後に

複雑そうに見えて実は簡単に実装出来ますのでぜひ覚えておいてください
良ければTwitterのフォローお願いします


この記事が気に入ったらサポートをしてみませんか？