用意するもの
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
<div class="item-7">7</div>
<div class="item-8">8</div>
<div class="item-9">9</div>
</div>
</body>
</html>
styles.css
body {
padding: 0;
margin: 0;
}
.container {
background: #eee;
/* グリッドレイアウト適用 */
display: grid;
}
.item-1 {
/* 色の指定 */
background: hsl(300, 80%, 30%);
}
.item-2 {
background: hsl(300, 80%, 40%);
}
.item-3 {
background: hsl(300, 80%, 50%);
}
.item-4 {
background: hsl(200, 80%, 30%);
}
.item-5 {
background: hsl(200, 80%, 40%);
}
.item-6 {
background: hsl(200, 80%, 50%);
}
.item-7 {
background: hsl(100, 80%, 30%);
}
.item-8 {
background: hsl(100, 80%, 40%);
}
.item-9 {
background: hsl(100, 80%, 50%);
}
行と列の指定
方眼紙状にマス目を配置していくので、行と列を指定指定いく
styles.css
.container {
background: #eee;
/* グリッドレイアウト適用 */
display: grid;
/*1*/
/*grid-template-rows: 80px 80px 80px;
grid-template-columns: 80px 80px 80px;*/
/*2*/
/*grid-template: 80px 80px 80px / 80px 80px 80px;*/
/*3*/
grid-template: repeat(3, 80px) / repeat(3,80px);
/*4 ブラウザの幅に合わせて要素並べ替え */
/*grid-template: repeat(3, 80px) / repeat(auto-fill,80px);*/
1~3はすべて同じ意味を表すのでどれで書いてもおｋ。
実行結果
4の実行結果
こんな感じにブラウザの幅に合わせて並び替えてくれる
サイズを% or 比率 で指定
styles.css
.container {
/* background: #eee;
display: grid;
grid-template-rows: 80px 80px 80px;*/
/* %指定*/
grid-template-columns: 50% 80px 80px;
/*比率指定*/
grid-template-columns: 100px 1fr 2fr;
%指定実行結果
比率指定実行結果
グリッド同士に隙間を持たせる
styles.css
.container {
/*background: #eee;
display: grid;
grid-template-rows: 80px 80px 80px;
grid-template-columns: 80px 80px 80px;*/
/*grid-row-gap: 10px;
grid-column-gap: 10px;*/
/*まとめて書くと*/
grid-gap: 10px 10px;
}
実行結果
グリッドラインによる要素の配置
styles.css
.container {
/* background: #eee;
display: grid;
grid-template-rows: 80px 80px 80px;
grid-template-columns: 80px 80px 80px; */
}
.item-1 {
/* background: hsl(300, 80%, 30%); */
/* 1 */
grid-row-start: 3;
grid-row-end: 4;
/* 2 */
grid-row: 3 / 4;
/* 3 */
grid-row: 3 / span 1;
/* 4 span1の場合は省略できる*/
grid-row: 3;
grid-column: 2 / span 2;
/* rowとcolumnをまとめると */
grid-area: 3 / 2 / 4 / 4;
}
1~4はすべて同じ意味
grid-area: row-start / column-start / row-end / column-end;
エリアを登録して指定
index.html
<body>
<div class="container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<!-- <div class="item-5">5</div>
<div class="item-6">6</div>
<div class="item-7">7</div>
<div class="item-8">8</div>
<div class="item-9">9</div> -->
</div>
</body>
styles.css
.container {
/*background: #eee;
display: grid;*/
/*1*/
/*grid-template-rows: 80px 80px 80px;
grid-template-columns: 80px 80px 80px;*/
/*2*/
/*grid-template-areas:
"header header header"
"main main sidebar"
"footer footer footer";*/
/*1と2をまとめると*/
grid-template:
"header header header" 80px
"main main sidebar" 80px
"footer footer footer" 80px
/ 80px 80px 80px;
}
.item-1 {
/* background: hsl(300, 80%, 30%); */
grid-area: header;
}
.item-2 {
/* background: hsl(300, 80%, 40%); */
grid-area: main;
}
.item-3 {
/* background: hsl(300, 80%, 50%); */
grid-area: sidebar;
}
.item-4 {
/* background: hsl(200, 80%, 30%); */
grid-area: footer;
}
実行結果
