Responsive Auto-Fill Grid with Tailwind Utility

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.

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

Usage Example

<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.

Snippets

Convert Image to WebP

Quickly convert a PNG image to the modern WebP format using the cwebp CLI tool. This command sets the output quality to 80%, striking a good balance between file size and visual clarity…

Rename PNG Files to Random UUIDs

A simple Bash script that renames all .png files in the current directory using randomly generated lowercase UUIDs. It ensures uuidgen is installed before execution and skips renaming if no…

Find Dirty Git Repositories

A tiny shell script that recursively scans a directory for Git repositories with uncommitted changes, nicknamed dirgit—a play on words combining "directory", "dirty", and "git".

Delete All Local Branches Except main

A handy one-liner to clean up all your local Git branches except main. It uses -D to force-delete each branch, even if it hasn’t been merged—so be careful. If you want a safer version…

Merge Video and Audio with FFmpeg

This simple FFmpeg command merges a video file video.mp4 and an audio file audio.mp4 without re-encoding. It copies both streams as they are, ensuring fast processing and no quality loss.

How to Reset a Single File in Git

If you've made changes to a file and want to discard them, you can use git checkout to restore it to the version from the last commit. This is useful when you want to undo changes that haven't…

Switch remote HTTPS to SSH in Git

Quick snippet to switch a Git remote URL from HTTPS to SSH for easier authentication with SSH keys.

Adjust Color Opacity

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…