CSS RWD Grid View

Modern Grid Systems

display: grid;

display: flex;

repeat(auto-fit, minmax(250px, 1fr))

gap: 20px;

🔹 CSS Grid Basics

CSS Grid is a powerful 2D layout system for creating complex web page layouts with rows and columns. You define a grid container with display: grid, then set up tracks with grid-template-columns and grid-template-rows. Place items using line numbers, named lines, or areas. Grid handles both dimensions simultaneously, making it perfect for overall page layouts, card grids, and forms. It simplifies responsive design with features like the repeat() function and auto-fit/auto-fill. Grid works beautifully alongside Flexbox (for one-dimensional alignment within grid items). Mastering Grid is essential for modern, efficient CSS layouts.

/* Basic grid setup */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* 3 columns: small, large, small */
    grid-template-rows: auto 1fr auto;  /* 3 rows: header, content, footer */
    gap: 20px;
    min-height: 100vh;
}

/* Grid areas for semantic layout */
.grid-container {
    display: grid;
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 200px 1fr 1fr;
    gap: 20px;
}

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

🔹 Responsive Grid with Auto-Fit

Using auto-fit or auto-fill with repeat() creates responsive grids that automatically adjust the number of columns based on available space. grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); creates as many 250px columns as fit in the container, stretching them (1fr) if there's extra space. auto-fill creates placeholder tracks even if items are fewer. This technique eliminates media queries for simple grid layouts. It's perfect for card galleries, image grids, or product listings that need to fluidly respond from mobile to desktop. Combined with CSS Grid's gap property for spacing, it creates clean, responsive layouts with minimal code.

/* Responsive card grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-5px);
}

🔹 Flexbox Grid Alternative

Flexbox provides a powerful one‑dimensional layout system ideal for simpler, flexible component arrangements. Unlike CSS Grid which handles both rows and columns, Flexbox focuses on distributing space along a single axis—either horizontally or vertically. It excels at aligning items, justifying content, and creating responsive navigation bars, form controls, or card rows without complex media queries. Use display: flex with properties like justify‑content, align‑items, and flex‑wrap to build adaptive interfaces that reflow naturally across screen sizes. Flexbox is widely supported and perfect for linear layouts where full two‑dimensional grid control isn’t required.

/* Flexbox grid */
.flex-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.flex-item {
    flex: 1 1 250px; /* grow, shrink, basis */
    min-width: 250px;
    background: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
}

/* Equal height columns */
.equal-height {
    display: flex;
    gap: 20px;
}

.column {
    flex: 1;
    background: #e3f2fd;
    padding: 20px;
    border-radius: 8px;
}

🔹 Mobile-First Grid

Start with mobile layout, then enhance for larger screens:

/* Mobile first: single column */
.responsive-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
    .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
    .responsive-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Large desktop: 4 columns */
@media (min-width: 1200px) {
    .responsive-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}