Bits of .NET

📐 Grid Layout = Two-Dimensional Layouts

Flexbox is one-dimensional. Grid Layout handles rows AND columns. Complex layouts made simple.

📝 Grid Properties

/* Container Properties */
.container {
    display: grid;
    grid-template-columns: 100px 1fr 2fr;
    grid-template-rows: auto 200px auto;
    gap: 20px;
    justify-items: start | end | center | stretch;
    align-items: start | end | center | stretch;
    place-items: center;  /* Shorthand */
}

/* Item Properties */
.item {
    grid-column: 1 / 3;  /* Start at column 1, end at 3 */
    grid-row: 1 / 2;     /* Start at row 1, end at 2 */
    grid-area: 1 / 1 / 3 / 4;  /* row-start / col-start / row-end / col-end */
    justify-self: start | end | center | stretch;
    align-self: start | end | center | stretch;
}

/* Named Grid Areas */
.container {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar content content"
        "footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

🎯 Common Grid Patterns

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

/* Masonry Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
    gap: 20px;
}
.item:nth-child(1) { grid-row: span 2; }
.item:nth-child(2) { grid-row: span 1; }

/* Holy Grail Layout */
.page {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}
.main-content {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
}

/* Image Gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 10px;
}
.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery .featured {
    grid-column: span 2;
    grid-row: span 2;
}

/* Dashboard Layout */
.dashboard {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 60px 1fr 60px;
    height: 100vh;
}
.sidebar { grid-area: 1 / 1 / 4 / 2; }
.header { grid-area: 1 / 2 / 2 / 3; }
.content { grid-area: 2 / 2 / 3 / 3; }
.footer { grid-area: 3 / 2 / 4 / 3; }

/* Grid vs Flexbox */
- Grid → Two-dimensional (rows & columns)
- Flexbox → One-dimensional (row or column)
- Use Grid for overall page layout
- Use Flexbox for components
- Combine both for best results

💡 Grid Tips

• Use Grid for overall page layout
• Use Flexbox for components
• Combine both for best results
• Use repeat() for consistent sizing
• Use minmax() for responsive sizing