プレビュー
HTML
<ul>
<li><h2>One</h2><p>Threshold.</p></li>
<li><h2>Two</h2><p>Then wrap.</p></li>
<li><h2>Three</h2><p>Equal grow.</p></li>
</ul>
CSS
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
ul {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 0;
list-style: none;
}
li {
flex-grow: 1;
flex-basis: calc((30rem - 100%) * 999);
padding: 1rem;
border-radius: 1rem;
background: var(--paper);
}
h2,
p {
margin: 0;
}
Tailwind
<style>
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
</style>
<ul class="flex flex-wrap gap-[1rem] p-0 list-none">
<li class="[flex-grow:1] [flex-basis:calc((30rem_-_100%)_*_999)] p-[1rem] rounded-[1rem] bg-[var(--paper)]"><h2 class="m-0">One</h2><p class="m-0">Threshold.</p></li>
<li class="[flex-grow:1] [flex-basis:calc((30rem_-_100%)_*_999)] p-[1rem] rounded-[1rem] bg-[var(--paper)]"><h2 class="m-0">Two</h2><p class="m-0">Then wrap.</p></li>
<li class="[flex-grow:1] [flex-basis:calc((30rem_-_100%)_*_999)] p-[1rem] rounded-[1rem] bg-[var(--paper)]"><h2 class="m-0">Three</h2><p class="m-0">Equal grow.</p></li>
</ul>