Responsive Grid System

css Copy Code

/* Responsive Grid System with CSS Grid */
.grid {
    display: grid;
    gap: var(--grid-gap, 24px);
    width: 100%;
}

/* Auto-fit columns */
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(var(--col-min, 280px), 1fr)); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Gap utilities */
.gap-sm { --grid-gap: 12px; }
.gap-md { --grid-gap: 24px; }
.gap-lg { --grid-gap: 40px; }

/* Span utilities */
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-full { grid-column: 1 / -1; }
.row-span-2 { grid-row: span 2; }

/* Dashboard layout with named areas */
.grid-dashboard {
    grid-template-columns: 250px 1fr 300px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "sidebar header header"
        "sidebar main aside"
        "sidebar footer footer";
    min-height: 100vh;
}

.grid-dashboard > .sidebar { grid-area: sidebar; }
.grid-dashboard > .header  { grid-area: header; }
.grid-dashboard > .main    { grid-area: main; }
.grid-dashboard > .aside   { grid-area: aside; }
.grid-dashboard > .footer  { grid-area: footer; }

/* Responsive breakpoints */
@media (max-width: 1024px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-dashboard {
        grid-template-columns: 1fr;
        grid-template-areas: "header" "main" "aside" "footer";
    }
    .grid-dashboard > .sidebar { display: none; }
}

@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .col-span-2, .col-span-3 { grid-column: span 1; }
    .grid { --grid-gap: 16px; }
}

/* Alignment utilities */
.items-center { align-items: center; }
.items-start { align-items: start; }
.justify-center { justify-items: center; }
.place-center { place-items: center; }

grid responsive layout utility

typescript

React Custom Hook Patterns

css

Dark Mode Toggle with CSS

css

Glassmorphism Card Component

css

Custom Scrollbar Styles