Grid Layoutを使った簡単なweb配置 #CSS

私が最近，Webサイトを作成する際に多用しているgridの使い方について紹介する．

gridって何?

CSSのGrid Layoutは，2次元レイアウトを簡単に作成することができる機能です．列と行を定義し格子状の箱を作ることによって，どの箱にどの要素を配置するのかを簡易的に行うことができます．

コンテナ
グリッドとして分割する親要素のことをコンテナを言い，コンテナでどのような分割の仕方をするのかを記述します．

アイテム
グリッド内の配置される個々の要素であり，通常、HTML要素がアイテムとなります．

以下のようなレイアウトが簡単にできます．

gridの使い方

親要素（コンテナ）での定義

displayプロパティの定義: Gridを有効にするために、親要素にdisplay: grid;を適用します。
列の定義: grid-template-columnsで行の区切り方を定義します。
行の定義: 必要に応じて、grid-template-rowsで列の区切り方を定義します。
アイテムの配置方法の指定: 必要であれば、align-itemsやjustify-itemsを使用して、アイテムの配置方法を制御します。

grid-template-columnsやgrid-template-rowsの定義の方法はさまざまで、ピクセル単位、1fr、auto、repeat()などがあります。

子要素（アイテム）での定義

行の配置位置: grid-columnでアイテムをコンテナのどの列に配置するか指定します
列の配置位置: grid-rowでアイテムをコンテナのどの行に配置するか指定します
コンテナから見たアイテムの配置位置指定: 必要であれば、align-selfやjustify-selfを使用して、コンテナから見たアイテムの配置方法を制御します

grid-columnやgrid-rowの定義の方法もさまざまで、例えば単に1と指定すると行（列）の一つ目の場所に配置されます。また、1/5と指定すると行（列）で1から5までのグリッドの範囲を指定することになります

gridを使った例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./Untitled-2.css">
</head>
<body>
    <header>
        <p>ヘッダータグ</p>
    </header>
    <main>
        <p>メイン</p>
    </main>
    <footer>
        <p>フッター</p>
    </footer>
</body>
</html>

index.css

body{
    height: calc(100vh - 16px);
    width: calc(100vw - 16px);
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
}
header{
    display: grid;
    height: 100%;
    width: 100%;
    grid-column: 1/11;
    grid-row: 1/2;
    background-color: rgb(240, 186, 186);
}
main{
    display: grid;
    height: 100%;
    width: 100%;
    grid-column: 2/10;
    grid-row: 2/10;
    background-color: greenyellow;
}
footer{
    display: grid;
    height: 100%;
    width: 100%;
    grid-column: 1/11;
    grid-row: 10/11;
    background-color: rgb(148, 148, 213);
}
p{
    font-size: large;
    font-weight: bold;
    align-self: center;
    justify-self: center;
}

これらの手順に従うことで、簡単かつ効果的にCSS Gridを使用して複雑なレイアウトを構築することができます。