CSS 幅固定レイアウト

gridを使って横幅を固定した要素と、残りを可変で埋めるレイアウトのサンプルです。

例えば、画像とテキストを横に並べたい時にfloatやflexを使うことがありますが、gridでも簡単に表現できます。

floatやflexを使うと結構悩むのが次のようなレイアウトです。

固定要素を左側寄せのパターン

width:120px

width:auto

<div class="demo_box">
    <div class="demo_item">width:120px</div>
    <div class="demo_item">width:auto</div>
</div>

これはgridを使うと簡単にできます。

固定要素を右側寄せのパターン

width:auto

width:120px

<div class="demo_box2">
    <div class="demo_item">width:auto</div>
    <div class="demo_item">width:120px</div>
</div>

CSSはこちら

    .demo_box {
        display: grid;
        grid-template-rows: 150px;
        grid-template-columns:  120px auto;
        background-color:#e7e3d2;
        padding:5px;
        width:auto;
    }
    .demo_item {
        margin:5px;
        background-color:#f7f5f0;
        color:#555;
        border-radius: 5px;
        align-items: center;
        justify-content: center;
        display: flex;
    }


    .demo_box2 {
        display: grid;
        grid-template-rows: 150px;
        grid-template-columns:  auto 120px;
        background-color:#e7e3d2;
        padding:5px;
        width:auto;
    }

最後に例えば画像を配置するとこんな感じです。