この記事は人間が書きました
はじめに
こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。
「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca
Flexbox と Grid の組み合わせ
Flexbox と Grid は競合するものではなく、得意なことを分担させることで、非常に強力なレイアウトを実現することができます。
Grid → マイクロレイアウト
ページ全体の大きな骨格や、セクションの配置など、2次元の面でレイアウトを組むのが得意
Flexbox → ミクロレイアウト
コンポーネント内の要素の整列や、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>フロントエンド1000本ノック 0063</title>
<style>
article {
display: flex;
flex-direction: column;
}
article p {
flex-grow: 1;
}
</style>
</head>
<body>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
<article>
<img src="img-1.jpg" alt="記事1の画像">
<h3>タイトル1</h3>
<p>本文1</p>
<button>詳細を見る</button>
</article>
<article>
<img src="img-2.jpg" alt="記事2の画像">
<h3>タイトル2</h3>
<p>本文2</p>
<button>詳細を見る</button>
</article>
<article>
<img src="img-3.jpg" alt="記事3の画像">
<h3>タイトル3</h3>
<p>本文3</p>
<button>詳細を見る</button>
</article>
<article>
<img src="img-4.jpg" alt="記事4の画像">
<h3>タイトル4</h3>
<p>本文4</p>
<button>詳細を見る</button>
</article>
<article>
<img src="img-5.jpg" alt="記事5の画像">
<h3>タイトル5</h3>
<p>本文5</p>
<button>詳細を見る</button>
</article>
<article>
<img src="img-6.jpg" alt="記事6の画像">
<h3>タイトル6</h3>
<p>本文6</p>
<button>詳細を見る</button>
</article>
</div>
</body>
</html>