Merhaba Arkadaşlar,
Bu yazımda Css in olmazsa olmazı grid kullanarak satranç tahtası nasıl yaparız anlatmaya çalışacağım 🙂
Hedeflediğimiz görsel aşağıdaki gibi olacak :
İlk önce kendiniz yapmayı deneyebilirsiniz
Grid kullanmak için bir div oluşturmamız gerekmektedir . bu divimiz kapsayıcı olan container divi olacaktır , daha sonra satranç tahtasının içerisindeki kareleri oluşturmamız gerekiryor ben bunun için white ve black class ismine sahip içerik divlerini oluşturacağız bu divler 100 piksel genişliği ve 100 piksel uzunluğu olacak şekilde ayarlamayı düşünüyorum. İçerik divlerimiz 63 tane olacak 8 sütun 8 satır kare olarak oluşturacağız aşağıda html ve css kodları mevcuttur:
<!DOCTYPE html> <html> <head> <title>Chessboard</title> <style> /* Write your code here */ /* Each square should be 100px by 100px */ /* My colours for white: #f0d9b5, black: #b58863 */ .container { width: 800px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; } .white { width: 100px; height: 100px; background-color: #f0d9b5; } .black { width: 100px; height: 100px; background-color: #b58863; } </style> </head> <body> <div class="container"> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> <div class="black"></div> <div class="white"></div> </div> </body> </html>Yararlı olması dileğiyle 🙂