J—P

I often find myself looking for this particular piece of code. This is just a simlpe responsive CSS grid that takes two parameters: col (default: 20rem) and gap (default: 0rem). This tiny snippet will create a fully responsive grid component. Try it yourself.

Live Demo

<script>
// Grid.svelte

export let col = 20
export let gap = 0
</script>

<div class={$$props.class} style="--col: {col}rem; --gap: {gap}rem;">
  <slot />
</div>

<style>
div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--col), 100%), 1fr));
  gap: var(--gap);
}
</style>

The example above is Svelte code but it is simple enough you can easily translate it to either framework of your choice or just plain old html and css.