CSS Gridの基本的な使い方をソースコードと画像を使って解説
CSS Gridは、HTML要素を簡単に配置するためのグリッドシステムです。
ここでは、初心者でも理解しやすいように、CSS Gridの基本的な使い方をソースコードと画像を使って解説します。
HTMLの準備
まずは、CSS Gridを使うためのHTMLの準備をします。
以下のようなHTMLを用意します。
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>このHTMLでは、5つの要素があるdiv要素があります。
これらの要素をグリッドに配置していきます。
CSS Gridの設定
次に、CSS Gridを使って要素を配置するための設定を行います。
以下のようなCSSを追加します。
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
.item {
background-color: #ccc;
padding: 20px;
text-align: center;
}このCSSでは、.container要素をグリッド表示に設定し、grid-template-columnsで3つの列を定義し、grid-gapで要素間のスペースを設定しています。
また、.item要素には、背景色と内側の余白を設定しています。
結果の確認
以上のHTMLとCSSを組み合わせることで、要素がグリッドに配置されます。以下がその結果です。
この結果から、要素が3つの列に分かれ、要素間には20pxのスペースが設定されていることが分かります。
grid-template-rows,grid-rowgrid-column
上記の解説を踏まえて、CSS Gridの次のステップについてソースコードと画像を使って解説します。
HTMLの準備
前回と同じHTMLを用意します。
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>CSS Gridの設定
先程のCSSコードに新たに以下のCSSを追加します。
/* ここから上記のコード */
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
.item {
background-color: #ccc;
padding: 20px;
text-align: center;
}
/* ここから追加 */
.container {
grid-template-rows: repeat(2, 1fr);
}
.item:nth-child(1) {
grid-row: 1 / 3;
grid-column: 1 / 2;
}
.item:nth-child(2) {
grid-row: 1 / 2;
grid-column: 2 / 4;
}
.item:nth-child(3) {
grid-row: 2 / 3;
grid-column: 2 / 3;
}
.item:nth-child(4) {
grid-row: 2 / 3;
grid-column: 3 / 4;
}
.item:nth-child(5) {
grid-row: 1 / 2;
grid-column: 4 / 5;
}このCSSでは、.container要素にgrid-template-rowsを追加して、2つの行を定義しています。
また、各.item要素にgrid-rowとgrid-columnを追加して、それぞれの要素をグリッドに配置しています。
結果の確認
以上のHTMLとCSSを組み合わせることで、要素が複雑なレイアウトに配置されます。
以下がその結果です。
この結果から、要素が2つの行に分かれ、それぞれの要素が異なる位置に配置されていることが分かります。
CSS Gridは、柔軟なレイアウト設計が可能なため、慣れてくるとより複雑なレイアウトも簡単に実現できます。
Gridを使用してページの中央にテキストを配置
次のステップは、Gridを使用してページの中央にテキストを配置することです。
HTMLの準備
<div class="text">
<h1>Hello World!</h1>
<p>This is some sample text.</p>
</div>grid-template-columnsとgrid-template-rowsを使用して、グリッドの列と行を定義
まず、body要素にdisplay: grid;を設定します。
body {
display: grid;
}次に、grid-template-columnsとgrid-template-rowsを使用して、グリッドの列と行を定義します。
この例では、2つの列と2つの行を定義しています。
body {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
}ここでの1frは、Gridの列や行の幅を自動調整するための単位です。また、autoは高さを自動調整するために使用されます。
次に、テキストを含む要素に、Gridのプロパティであるgrid-columnとgrid-rowを設定します。
これらのプロパティは、グリッド内のどの列と行に要素を配置するかを指定します。
.text {
grid-column: 1 / 3;
grid-row: 2 / 3;
text-align: center;
margin-top: 20%;
}最後に、テキストを含む要素にtext-alignとmargin-topを追加して、テキストを中央に配置し、上部に余白を設定します。
これらのスタイルを適用すると、ページの中央にテキストが表示されます。 こちらが、完全なCSSコードになります。
body {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
}
.text {
grid-column: 1 / 3;
grid-row: 2 / 3;
text-align: center;
margin-top: 20%;
}以下がその結果です。
以上が、CSS Gridの基本的な使い方です。
グリッドの列数やスペース、要素の配置などを自由に設定することができるため、複雑なレイアウトも簡単に実現できます。
