grid-custom.css

/* Base Grid */
.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
}
.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}
.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.gap-4 {
    gap: 1rem;
}
.gap-3 {
    gap: 0.75rem;
}
.gap-2 {
    gap: 0.5rem;
}
.gap-x-4 {
    column-gap: 1rem;
}
.gap-x-6 {
    column-gap: 1.5rem;
}
.gap-y-4 {
    row-gap: 1rem;
}
.gap-y-2 {
    row-gap: 0.5rem;
}

.col-span-full {
    grid-column: 1 / -1;
}
.col-span-2 {
    grid-column: span 2;
}

/* Responsive */
@media (min-width: 640px) {
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .sm\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .sm\:col-span-2 {
        grid-column: span 2;
    }
}

@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}