Web tasarımının görsel cazibesini artırmak ve içeriği daha çekici hale getirmek için kullanılan masonry layout, farklı boyutlardaki öğeleri düzensiz bir şekilde bir araya getirerek modern bir görünüm sağlar. Bu yazıda, CSS Grid kullanarak nasıl dinamik ve şık bir masonry layout oluşturabileceğinizi adım adım keşfedeceğiz.
HTML Yapısını Oluşturma
İlk adımımız, HTML belgemize bir masonry container ve içerisine çeşitli öğeler eklemek olacak. Her öğe, sitemizin içeriği olabilir, örneğin bir resim, yazı veya bağlantı.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Masonry Layout</title>
</head>
<body>
<div class="masonry-container">
<div class="item">1</div>
<div class="item">2</div>
<!-- Diğer öğeler buraya eklenecek -->
</div>
</body>
</html>
CSS Grid ile Layout Oluşturma
CSS dosyamızda, masonry layout için gerekli olan stil tanımlamalarını yapalım.
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
.masonry-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
.item {
background-color: #ddd;
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
}
Bu CSS kodu, öğeleri düzenlemek ve aralarındaki boşluğu belirlemek için gerekli temel stilleri içerir.
Responsive Tasarım İçin Media Query Eklemek
Masonry layout’imizi her cihazda güzel görünmesini sağlamak için biraz daha ileri giderek bir media query ekleyelim.
@media only screen and (max-width: 768px) {
.masonry-container {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
}
Bu media query, ekran genişliği 768 pikselden küçükse sütun sayısını ayarlar, böylece mobil cihazlarda daha iyi bir deneyim elde edilir.
Sonuç ve Öneriler
Bu adımları takip ederek, CSS Grid kullanarak web sitenizde masonry layout oluşturabilir ve içeriğinizi daha çekici hale getirebilirsiniz. Unutmayın ki tasarım sürecinde özgün ve dikkat çekici içeriklerle oynamaktan çekinmeyin!