プレビュー
HTML
<main class="layout">
<article>
<h1>Primary story</h1>
<p>The main column grows while the note keeps a readable measure.</p>
</article>
<aside>
<h2>Context</h2>
<p>A compact supporting note.</p>
</aside>
</main>
CSS
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
.layout {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(10rem, 1fr);
gap: 1.25rem;
}
h1,
h2,
p {
margin: 0;
}
aside {
padding: 0.8rem;
border-radius: 0.8rem;
background: var(--chip);
}
@media (width < 42rem) {
.layout {
grid-template-columns: 1fr;
}
}
Tailwind
<style>
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
@media (width < 42rem) {
.layout {
grid-template-columns: 1fr;
}
}
</style>
<main class="layout grid [grid-template-columns:minmax(0,_2fr)_minmax(10rem,_1fr)] gap-[1.25rem]">
<article>
<h1 class="m-0">Primary story</h1>
<p class="m-0">The main column grows while the note keeps a readable measure.</p>
</article>
<aside class="p-[0.8rem] rounded-[0.8rem] bg-[var(--chip)]">
<h2 class="m-0">Context</h2>
<p class="m-0">A compact supporting note.</p>
</aside>
</main>