---
type: collection
section: snippets
generated_at: 2026-05-19T08:19:15+02:00
total_entries: 2
tag_filter: CSS
---

# Snippets

## Responsive Auto-Fill Grid with Tailwind Utility

---
type: snippet
id: l0pxg6oh1lu9fc1c
title: >
  Responsive Auto-Fill Grid with Tailwind
  Utility
url: >
  https://www.jakubpelak.com/snippets/responsive-auto-fill-grid-with-tailwind-utility
section: snippets
tags:
  - CSS
  - Grid
  - Tailwind
published_at: 2025-08-23
---

This custom Tailwind utility creates a responsive grid that automatically fills the available space with as many columns as possible. The minimum column width is controlled by the number you pass after `grid-cols-fill-`. Perfect for card layouts, galleries, or product grids without hardcoding breakpoints.

```postcss
@utility grid-cols-fill-* {
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(calc(var(--spacing) * --value(integer)), 100%), 1fr)
  );
}
```

### Usage Example

```html
<div class="grid grid-cols-fill-48 gap-4">
  <div class="bg-gray-200 p-4">Item 1</div>
  <div class="bg-gray-200 p-4">Item 2</div>
  <div class="bg-gray-200 p-4">Item 3</div>
  <div class="bg-gray-200 p-4">Item 4</div>
</div>
```

This will create as many columns as fit in the container, each at least `calc(var(--spacing) * 48)` wide, expanding to fill remaining space.

## Adjust Color Opacity

---
type: snippet
id: jKV0rmGhPI0PdyWV
title: Adjust Color Opacity
url: >
  https://www.jakubpelak.com/snippets/adjust-color-opacity
section: snippets
tags:
  - CSS
  - Color
published_at: 2025-03-08
---

Easily create a semi-transparent version of any color using `color-mix()`. This CSS function blends two colors in a specified ratio. In this example, `currentColor` is mixed with `transparent` at 50%, creating a softer, partially transparent effect that adapts to the element’s text or border color.

```css
.something {
  color: color-mix(in srgb, currentColor, transparent 50%);
}
```

Credit: (link: https://una.im/color-mix-opacity/)