プレビュー
HTML
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
CSS
:root {
--ink: #2a1610;
--paper: #f8efe6;
--accent: #b54a24;
--accent-2: #3d4a5c;
--on-accent: #fff6ee;
--muted: #7a5c50;
--line: #e0c8b6;
--chip: #f0ddd0;
}
ul {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.4rem;
width: min(100%, 12rem);
margin: 0;
padding: 0;
list-style: none;
}
li {
display: grid;
place-items: center;
min-height: 3.4rem;
border-radius: 0.7rem;
background: var(--chip);
color: var(--ink);
font-weight: 800;
}
Tailwind
<style>
:root {
--ink: #2a1610;
--paper: #f8efe6;
--accent: #b54a24;
--accent-2: #3d4a5c;
--on-accent: #fff6ee;
--muted: #7a5c50;
--line: #e0c8b6;
--chip: #f0ddd0;
}
</style>
<ul class="grid [grid-template-columns:1fr_1fr] gap-[0.4rem] w-[min(100%,_12rem)] m-0 p-0 list-none">
<li class="grid place-items-center min-h-[3.4rem] rounded-[0.7rem] bg-[var(--chip)] text-[var(--ink)] font-extrabold">1</li>
<li class="grid place-items-center min-h-[3.4rem] rounded-[0.7rem] bg-[var(--chip)] text-[var(--ink)] font-extrabold">2</li>
<li class="grid place-items-center min-h-[3.4rem] rounded-[0.7rem] bg-[var(--chip)] text-[var(--ink)] font-extrabold">3</li>
<li class="grid place-items-center min-h-[3.4rem] rounded-[0.7rem] bg-[var(--chip)] text-[var(--ink)] font-extrabold">4</li>
</ul>