demo · v131
grid and flex layout inside <details>
Before v131, setting display: grid or display: flex on a <details> was either ignored or broke disclosure. Now display is unrestricted, and the new ::details-content pseudo gives you a real grid track for the body. This unlocks side-by-side summary/body layouts native to forms and dashboards.
shipping
1-2 business days within the EU. Express options offered at checkout for next-day delivery in major cities.
returns
Free returns within 30 days. Include the original packaging; we'll email a prepaid label.
warranty
2-year warranty against manufacturing defects. Extended warranty is available at the time of purchase.
the api
details {
display: grid;
grid-template-columns: 200px 1fr;
gap: 1rem;
/* summary becomes a real grid item, no internal slot trickery */
}
details summary { grid-column: 1; }
details ::details-content { grid-column: 2; }
/* Tip: clear the platform marker if your design supplies its own */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }