notes/code/CSS Recipes

tagged: css, webdev, howto


Use the <details> element:

Here's how to make them simply and accessibly, with no JavaScript, using the :focus-within pseudo selector:

You can also use the <details> element: Read more about this on the <details> page

Horizontal scrolling sections

Thanks to this tweet from Cassie Evans.

.container {
width: 100vw;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
.item {
flex: 0 0 auto;

Responsive tiled layout with CSS Grid and no media queries

This is great for making grid layouts of even-sized tiles where each tile never gets narrower than the specified min-width. Stolen from this tweet by @thekitze.

const autoGrid = (minColumnWidth = 250, gap = 0) => css`
display: grid;
grid-template-columns: repeat(auto-fill, minmax(${minColumnWidth}px, 1fr));
grid-gap: ${gap};