flex: grid;。
流行りのボックスを左右に振るレイアウトのやり方をモックで再現。
直感的につかみにくいので、機会を改めてまた学習する。
https://claude.ai/share/55130714-63dc-401a-953e-d4a29508c6e9
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Grid最小サンプル</title>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item double">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class="page">
<!--
<div class="normal">
<p>ここは通常のコンテンツ（1000pxのコンテンツボディ内に収まる）</p>
</div>
-->
<div class="breakout-left">
<h2>見出しテキスト見出しテキスト見出しテキスト</h2>
<p>本文ダミーテキスト本文ダミーテキスト本文ダミーテキスト本文ダミーテキスト本文ダミーテキスト本文ダミーテキスト本文ダミーテキスト本文ダミーテキスト本文ダミーテキスト本文ダミーテキスト本文ダミーテキスト本文ダミーテキスト本文ダミーテキスト本文ダミーテキスト。</p>
<p>本文ダミーテキスト本文ダミーテキスト本文ダミーテキスト本文ダミーテキスト本文ダミーテキスト本文ダミーテキスト本文ダミーテキスト本文ダミーテキスト本文ダミーテキスト。</p>
</div>
<!--
<div class="normal">
<p>ここは通常のコンテンツ（1000pxのコンテンツボディ内に収まる）</p>
</div>
-->
</div>
</body>
</html>@charset "UTF-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
position: relative;
font-family: 'Noto Sans JP', sans-serif;
letter-spacing: -0.025em;
color: #202020;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
gap: 10px;
/* frはfraction */
}
.item {
background: #2196f3;
color: #fff;
padding: 30px;
text-align: center;
font-size: 20px;
}
.item.double{
grid-column: 1 / 3;
}
/* */
/* ページ全体を「左余白｜コンテンツ1000px｜右余白」の3列に */
.page {
display: grid;
grid-template-columns:
[full-start] 1fr
[content-start] min(1000px, 100%) [content-end]
1fr [full-end];
gap: 10px;
}
/* 通常の要素はコンテンツ列（中央1000px）に収める */
.page > * {
grid-column: content;
}
/* 左端までブレイクアウトするブロック */
.breakout-left {
grid-column: full-start / content-end;
background: red;
/* 中身のテキストはコンテンツ左端に揃え直す */
padding-left: max(40px, calc(100% - 1000px));
padding-right: 40px;
padding-block: 60px;
box-sizing: border-box;
border-radius: 0 10px 10px 0;
}
.breakout-left h2 {
color: #FFF;
font-size: 32px;
margin-top: 0;
}
.breakout-left p {
color: #FFF;
line-height: 1.9;
}
/* 比較用：通常のコンテンツ */
.normal {
color: #fff;
padding: 40px 0;
background-color: green;
}
