Bits of .NET

📐 CSS Grid = Modern Layout

Float ve table eski moda. Adım adım CSS Grid ile modern web tasarımı yapın.

🎯 Adım 1-5: CSS Grid

/* Adım 1: Grid Container */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 20px;
}

/* Adım 2: Grid Items */
.header { grid-column: 1 / -1; }
.sidebar { grid-row: 2 / 3; }
.main { grid-column: 2 / 3; }
.footer { grid-column: 1 / -1; }

/* Adım 3: Grid Areas */
.grid-container {
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
}

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

/* Adım 4: Responsive */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "header"
            "main"
            "sidebar"
            "footer";
    }
}

/* Adım 5: Auto-fill */
.grid-container {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

🎯 Adım 6-8: Advanced

/* Adım 6: Nested Grid */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.nested-grid {
    display: grid;
    grid-template-columns: subgrid;
}

/* Adım 7: Grid with Flexbox */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Adım 8: Named Lines */
.grid-container {
    grid-template-columns: [main-start] 1fr [content-start] 2fr [content-end] 1fr [main-end];
}

.item {
    grid-column: main-start / main-end;
}

/* Browser Support */
@supports (display: grid) {
    .grid-container {
        display: grid;
    }
}

✅ CSS Grid Avantajları

• ✓ 2D layout kontrolü
• ✓ Responsive design
• ✓ Flexible sizing
• ✓ Cleaner HTML
• ✓ Better performance