Arkadaşlar selam, css gridde,
bir container divinin içinde 3 tane başka şeyler var.
[BİRİNCİ KUTU] [İKİNCİ KUTU] [ÜÇÜNCÜ KUTU]
şeklinde.
grid-template-columns: 30% 70% 100%;
veriyorum. Hani ilk 2 kutu oldukları divi fullesinler, 3. kutu da yeni satıra geçip onu fullesin istiyorum.
Aşağı inmiyor. 3. columna 10000% de versem, olduğu yerde boyutlanıyor ve sayfada yatay scroll açıyor.
Bu 3. kutuyu nasıl aşağı atarım?
Hocam sanırım çözdünüz. Biraz geç kaldım ama şöyle anlatayım ben size.
"grid-template-columns" propertysinin aldığı valuelar yan yana kaç tane column oluşturacağını gösterir. "30 70" ilk satırda "100" ikinci satırda demenin yolu
grid-template-columns: 30% 70%;
demektir.
1. div 30% alanı kapsayacak, 2. div 70% alanı, 3. div başa dönüp 30% alanı kapsayacak. Biz 3. dive grid-column tanımlayacağız. Diyeceğiz ki sen 2 birim yer kapla. Yani grid-column: span 2; Böyle dediğimizde 30% + 70% lik iki birimi birden kapatacak.
Edit: Generatorler işini görür ancak declarationları bilmenizde öğrenmenizde fayda var. Bir yardıma ihtiyacınız olursa mesaj atmanız yeterli.
Edit2: Mümkün olduğunca "fr" birimini kullanının. Fractionlar gridin kendi birimidir. Usulüne göre yazmanızda fayda var.