この記事は人間が書きました
はじめに
こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。
「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca
作成したコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フロントエンド1000本ノック 0062</title>
<style>
.layout {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-template-areas:
"hero hero title title"
"hero hero title title"
"hero hero subtitle page-number"
"hero hero content content"
;
}
.item-1 {
grid-area: hero;
border: 2px solid #e74c3c;
}
.item-2 {
grid-area: title;
border: 2px solid #3498db;
}
.item-3 {
grid-area: subtitle;
border: 2px solid #2ecc71;
}
.item-4 {
grid-area: content;
border: 2px solid #f39c12;
}
.item-5 {
grid-area: page-number;
border: 2px solid #9b59b6;
}
</style>
</head>
<body>
<div class="layout">
<div class="item-1">ヒーローイメージ</div>
<div class="item-2">メインタイトル</div>
<div class="item-3">サブタイトル</div>
<div class="item-4">本文</div>
<div class="item-5">ページ番号</div>
</div>
</body>
</html>
grid-column / grid-row を使った場合
.item-1 { grid-column: 1 / 3; grid-row: 1 / 5; }
.item-2 { grid-column: 3 / 5; grid-row: 1 / 3; }
.item-3 { grid-column: 3 / 4; grid-row: 3 / 4; }
.item-4 { grid-column: 3 / 5; grid-row: 4 / 5; }
.item-5 { grid-column: 4 / 5; grid-row: 3 / 4; }