メインコンテンツまでスキップ

Gridの使い方

Gridレイアウトは若干複雑ですが、設定方法に慣れることで非常に便利な機能となります。

Flex boxで使っていたレイアウトでの例​

Gridを使ってFlex boxで使っていたレイアウトを実装する場合、子要素に対して横幅や余白の指定をする必要がない、というメリットがあります。

Gridスタイルが設定されている親要素に対して横幅や余白の指定をすることが可能です。

.c-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr 1fr;

    &__item {
        background: #999;
        height: 140px;
    }
}

少し複雑なレイアウトの例​

Gridレイアウトは一つの要素が何列分・何行分表示するか、という指定が可能です。

そのため、例えば1つ目の要素だけ他の要素よりも大きく、かつ各端を揃える必要がある場合、Gridレイアウトは力を発揮します。

.c-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr 1fr;

    &__item {
        background: #999;
        height: 140px;

        &:first-child {
            height: auto;

            grid-row-start: 1;
            grid-row-end: span 2;
            // Same with
            // grid-row: 1 / span 2;

            grid-column-start: 1;
            grid-column-end: span 2;
            // Same with
            // grid-column: 1 / span 2;
        }
    }
}

さらに詳しい情報について​

Gridレイアウトはここで紹介した機能以外にも沢山の設定項目があります。もし詳しい情報が知りたい場合は、MDNにてGridレイアウトの解説がなされていますので、そちらから確認が可能です。