CSS Grid ile Modern Web Düzenleri Oluşturmanın Yolları

CSS Grid, web sayfalarında karmaşık ve esnek düzenler oluşturmak için güçlü bir araçtır. İşte CSS Grid kullanarak modern web düzenleri oluşturmanın çeşitli yolları:

1. Temel Grid Yapısı

Basit bir grid yapısı oluşturmakla başlayalım:

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}
</style>

2. Farklı Boyutlarda Grid Öğeleri

Grid öğelerinin boyutlarını özelleştirerek daha dinamik düzenler oluşturabilirsiniz:

<div class="grid-container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 100px);
  grid-gap: 10px;
}

.item-1 {
  grid-column: span 2;
  grid-row: span 2;
}

.item-4 {
  grid-column: span 2;
}
</style>

3. Grid Alanları ile Sayfa Düzeni

Grid alanlarını kullanarak tipik bir web sayfası düzeni oluşturalım:

<div class="page-layout">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

<style>
.page-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }

/* Stil için */
.page-layout > * {
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}
</style>

4. Responsive Grid Düzeni

Media queries kullanarak responsive bir grid düzeni oluşturalım:

<div class="responsive-grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

<style>
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

.item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

@media (max-width: 600px) {
  .responsive-grid {
    grid-template-columns: 1fr;
  }
}
</style>

5. Grid ile Overlapping Öğeler

Grid'in öğeleri üst üste bindirme yeteneğini kullanalım:

<div class="overlap-grid">
  <div class="background">Background</div>
  <div class="content">Content</div>
  <div class="overlay">Overlay</div>
</div>

<style>
.overlap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.background {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  background-color: #f0f0f0;
}

.content {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  background-color: white;
  z-index: 1;
}

.overlay {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  background-color: rgba(0, 0, 0, 0.3);
}

.overlap-grid > * {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

6. Grid ile Masonry Benzeri Düzen

CSS Grid kullanarak masonry benzeri bir düzen oluşturalım:

<div class="masonry-grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item tall">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item tall">6</div>
</div>

<style>
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 20px;
  grid-gap: 20px;
}

.item {
  background-color: #f0f0f0;
  padding: 20px;
}

.item.tall {
  grid-row: span 2;
}

@media (max-width: 600px) {
  .masonry-grid {
    grid-template-columns: 1fr;
  }
}
</style>

<script>
// Bu script, öğelerin yüksekliklerine göre grid-row-end değerlerini ayarlar
function resizeGridItem(item) {
  const grid = document.querySelector('.masonry-grid');
  const rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
  const rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
  const rowSpan = Math.ceil((item.querySelector('.content').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
  item.style.gridRowEnd = 'span ' + rowSpan;
}

document.querySelectorAll('.masonry-grid .item').forEach(resizeGridItem);
window.addEventListener('resize', () => {
  document.querySelectorAll('.masonry-grid .item').forEach(resizeGridItem);
});
</script>

7. Grid ile Karmaşık Galeri Düzeni

Farklı boyutlarda görselleri düzenlemek için grid kullanalım:

<div class="gallery-grid">
  <img src="image1.jpg" alt="Image 1" class="wide">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3" class="tall">
  <img src="image4.jpg" alt="Image 4">
  <img src="image5.jpg" alt="Image 5">
  <img src="image6.jpg" alt="Image 6" class="big">
</div>

<style>
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wide {
  grid-column: span 2;
}

.tall {
  grid-row: span 2;
}

.big {
  grid-column: span 2;
  grid-row: span 2;
}
</style>

Bu örnekler, CSS Grid'in modern web düzenleri oluştururken ne kadar güçlü ve esnek olabileceğini göstermektedir. Grid ile karmaşık düzenler oluşturabilir, responsive tasarımlar yapabilir ve geleneksel yöntemlerle zor olan düzenleri kolayca elde edebilirsiniz. Uygulamanızın ihtiyaçlarına ve tasarım gereksinimlerinize göre bu teknikleri kullanabilir ve özelleştirebilirsiniz.