用途
新着
履歴
分類

CSS 幅固定レイアウト

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;
    }

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

例えば写真を左に配置して文字を右に沿わせるレイアウトです。
いろんな方法がありますが、覚えておきたいレイアウトの一つです。

公開 2020-03-16 23:26:20
更新 2022-01-31 01:45:58
このページの二次元コード
CSS 幅固定レイアウト

人気のサンプル

search -  category -  about
© 2024 kipure
Top