CSS Grid ve Responsive Tasarım

CSS Grid

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 eşit sütun */
    grid-template-rows: auto;
    gap: 20px;
    padding: 20px;
}

/* Belirli sütun genişlikleri */
.layout {
    display: grid;
    grid-template-columns: 250px 1fr 200px; /* sidebar - ana - yan */
    grid-template-rows: 60px 1fr 50px;      /* header - içerik - footer */
    min-height: 100vh;
}

/* Grid alanları */
.layout {
    grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";
}

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

Responsive Tasarım

/* Mobil öncelikli yaklaşım */
.container {
    display: grid;
    grid-template-columns: 1fr; /* Mobilde tek sütun */
    gap: 15px;
}

/* Tablet (768px ve üzeri) */
@media (min-width: 768px) {
    .container {
        grid-template-columns: repeat(2, 1fr); /* 2 sütun */
    }
}

/* Masaüstü (1024px ve üzeri) */
@media (min-width: 1024px) {
    .container {
        grid-template-columns: repeat(3, 1fr); /* 3 sütun */
    }
}