プレビュー
HTML
<ul>
<li class="wide">Hero</li>
<li>A</li>
<li>B</li>
<li class="tall">C</li>
</ul>
CSS
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
ul {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 5rem 5rem;
gap: 0.6rem;
margin: 0;
padding: 0;
list-style: none;
}
li {
display: grid;
place-items: center;
border-radius: 0.9rem;
background: var(--paper);
font-weight: 700;
}
.wide {
grid-column: 1 / span 2;
background: var(--accent);
color: var(--on-accent);
}
.tall {
background: var(--accent-2);
color: var(--on-accent);
}
Tailwind
<style>
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
.wide {
grid-column: 1 / span 2;
}
</style>
<ul class="grid [grid-template-columns:1fr_1fr] [grid-template-rows:5rem_5rem] gap-[0.6rem] m-0 p-0 list-none">
<li class="wide grid place-items-center rounded-[0.9rem] bg-[var(--paper)] font-bold bg-[var(--accent)] text-[var(--on-accent)]">Hero</li>
<li class="grid place-items-center rounded-[0.9rem] bg-[var(--paper)] font-bold">A</li>
<li class="grid place-items-center rounded-[0.9rem] bg-[var(--paper)] font-bold">B</li>
<li class="tall grid place-items-center rounded-[0.9rem] bg-[var(--paper)] font-bold bg-[var(--accent-2)] text-[var(--on-accent)]">C</li>
</ul>