gridレイアウトチュートリアル

grid レイアウトチュートリアル#

レイアウトの開始#

.grid {
    display: grid;
}

特徴：grid レイアウトの直接の子要素はデフォルトで grid 要素です

行列の制御#

列の指定#

固定幅

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px; /*配置とサイズを設定*/
}

可変幅

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /*配置とサイズを設定*/
}

fr は grid 固有の可変幅で、残りのスペースを自動的に占めます

複数行列の指定

.grid {
    /*50pxを12回入力することと同じで、つまり12列です*/
    grid-template-columns: repeat(12, 50px);
}

行の指定#

.grid {
    /*50pxを12回入力することと同じで、列と同じ原理です*/
    grid-template-rows: repeat(12, 50px);
}

デフォルト指定

grid-auto-rows: 100px; //指定がない場合、デフォルトで行の高さは100pxです
grid-auto-rows: auto; //autoは要素のサイズに応じて自動的に割り当てられます

キーワード#

grid-template-rows: repeat(auto-fill, 50px); //コンテンツが自動的に埋められ、50px未満のスペースでは自動的に改行されます

最小値と最大値の設定

grid-template-rows: repeat(auto-fill, minmax(150px, 1fr)); //最小列は150px、最大は1frの可変幅です

要素間の間隔#

要素間の間隔の設定#

.grid {
    display: grid;
    /*配置とサイズを設定*/
    grid-template-columns: 1fr 1fr 1fr;
    /*列の間隔を設定*/
    column-gap: 24px;
    /*行の間隔を設定*/
    row-gap: 24px;
    /*行と列の間隔を一括で設定*/
    gap: 24px;
}

要素の配置#

グリッドを手動で定義する#

このようなレイアウトを設定する場合、grid-template-areasプロパティを使用できます

.layout {
    grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

各要素は対応する領域を個別に指定します

例：

<template>
    <div class="grid">
        <div class="header">
            これはヘッダーです
        </div>

        <div class="aside">
            これはサイドバー<br>
            これはサイドバー<br>
            これはサイドバー<br>
            これはサイドバー<br>
        </div>

        <div class="main">
            これはメインコンテンツです<br>
            これはメインコンテンツです<br>
            これはメインコンテンツです<br>
            これはメインコンテンツです<br>
            これはメインコンテンツです<br>
            これはメインコンテンツです<br>
        </div>

        <div class="footer">
            これはフッターです
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
</script>

<style scoped lang="less">
.grid {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-areas:/*親要素で指定する必要があります*/
    "header header header"
    "sidebar content content"
    "footer footer ."; /*.はプレースホルダーとして使用できます*/
}

.header {
    grid-area: header;
}

.aside {
    grid-area: sidebar;
}

.main {
    grid-area: content;
}

.footer {
    grid-area: footer;
}
</style>

上記の例と同じく、別の方法でコンテンツを指定する場合は、指定されたタグで囲む必要があります

例：<header>これはヘッダーです</header>

header {
    grid-area: header;
}

aside {
    grid-area: sidebar;
}

main {
    grid-area: content;
}

footer {
    grid-area: footer;
}

直接グリッドを使用する#

grid はグリッドレイアウトであり、線を使用してレイアウトの位置を記述できます

header {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

結果は上記の図と同じです

省略形 上記のコードと同じ効果

header {
    grid-columnn: 1 / 3;
    grid-row: 1 / 2;
}

省略形 2

要件：スパンは 1 です

1 / 2 は 1 と省略できます
2 / 3 は 2 と省略できます
3 / 4 は 3 と省略できます