はじめに
CSSを学びたいStep21です！今回はgrid-template-areasを学んでいこうと思います！
※grid-template-areasは、CSS Grid Layoutを使用してグリッドコンテナ内のアイテムを配置するための便利な方法です。これにより、グリッドのレイアウトを視覚的に定義しやすくなります。
成果物
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Template Areas Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
styles.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.grid-container {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-gap: 10px;
background-color: #fff;
padding: 10px;
}
.grid-container > div {
background-color: #ddd;
padding: 20px;
text-align: center;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
なるほど！これはめっちゃ便利ですね！
縦に表現する場合、縦配置用のコンポーネントと横配置用のコンポーネントを書いてたんですが、不要になりそうですね！！
追加
あまりにも優秀だったので、もう1本学んでおきたいなと思い作りました！
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complex Grid Template Areas Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
<div class="widget1">Widget 1</div>
<div class="widget2">Widget 2</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
styles.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.grid-container {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"sidebar widget1 widget2"
"footer footer footer";
grid-gap: 10px;
background-color: #fff;
padding: 10px;
}
.grid-container > div {
background-color: #ddd;
padding: 20px;
text-align: center;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.widget1 {
grid-area: widget1;
}
.widget2 {
grid-area: widget2;
}
.footer {
grid-area: footer;
}