CSS Gridレイアウトは、Webデザインにおいて強力で柔軟なツールです。この記事では、display: gridを使用してシンプルな3行3列の表を作成する方法をステップバイステップで紹介します。
HTMLの構造を作成
まずは、基本的なHTML構造を作成します。この例では、9つのアイテムを持つ3行3列の表を作成します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Table Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
<div class="grid-item">Item 7</div>
<div class="grid-item">Item 8</div>
<div class="grid-item">Item 9</div>
</div>
</body>
</html>CSSスタイルを定義
次に、CSSでグリッドレイアウトを定義します。ここでは、grid-template-columnsとgrid-template-rowsプロパティを使用して3列3行のグリッドを作成します。
/* styles.css */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px; /* グリッドアイテム間のスペース */
width: 300px; /* コンテナの幅 */
height: 300px; /* コンテナの高さ */
}
.grid-item {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #000;
background-color: #f0f0f0;
}- grid-template-columns と grid-template-rows: repeat(3, 1fr)は3つの列または行を均等に分割します。1frは「1フラクションユニット」を意味し、利用可能なスペースを均等に分割します。
- gap: グリッドアイテム間のスペースを設定します。
- width と height: コンテナの幅と高さを設定します。
- width と height: コンテナの幅と高さを設定します。
- display: flex: グリッドアイテム内のコンテンツを中央に配置するためにフレックスボックスを使用します。
- border と background-color: アイテムの境界線と背景色を設定します。
サンプル
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
まとめ
この方法を使えば、CSS Gridを利用して簡単にシンプルな表を作成できます。グリッドレイアウトは非常に柔軟で強力なツールですので、さらにカスタマイズして複雑なレイアウトも簡単に作成できます。CSS Gridの詳細を学ぶことで、Webデザインの幅を広げることができるでしょう。
