私が最近，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を使った例
<!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>
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を使用して複雑なレイアウトを構築することができます。