CSS Gridde Alt Satıra Nasıl Düşerim?

21-12-2019, 23:19:56

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?

21-12-2019, 23:29:59

#2

~~Alicanklc~~

Üyeliği durduruldu

Burdaki builderi biraz kurcalayarak anlayabilirsiniz hocam

21-12-2019, 23:34:53

#3

caylakgirisimci

Alicanklc adlı üyeden alıntı: mesajı görüntüle

Burdaki builderi biraz kurcalayarak anlayabilirsiniz hocam

Hocam orası karışık geldi biraz ama builder olduğunu öğrendim sizden:
https://grid.layoutit.com/ şu siteden denedim ama yok olmuyor, acaba grid sistemine aykırı bir şey mi istiyorum?
Benim istediğim dizayn bu sitede:
https://prnt.sc/qe32qj
şu ayarlarda ama olmuyor sadece 2 yan yana panel açıyor bu.
Benim istediğim bu iki yan panelin altına 1 tane de uzunca 100% widthe sahip bi kutu daha koymak.
Şu yani:
https://prnt.sc/qe331l

Şu dizaynı yapamadım bi saattir kendimle cebelleşiyorum

Alicanklc adlı üyeden alıntı: mesajı görüntüle

Burdaki builderi biraz kurcalayarak anlayabilirsiniz hocam

Hocam oldu tamam çok teşekkür ederim eline sağlık:
https://cssgrid-generator.netlify.com/ şu siteyle çözdüm

21-12-2019, 23:42:38

#4

~~Alicanklc~~

Üyeliği durduruldu

caylakgirisimci adlı üyeden alıntı: mesajı görüntüle

Hocam orası karışık geldi biraz ama builder olduğunu öğrendim sizden:
https://grid.layoutit.com/ şu siteden denedim ama yok olmuyor, acaba grid sistemine aykırı bir şey mi istiyorum?
Benim istediğim dizayn bu sitede:
https://prnt.sc/qe32qj
şu ayarlarda ama olmuyor sadece 2 yan yana panel açıyor bu.
Benim istediğim bu iki yan panelin altına 1 tane de uzunca 100% widthe sahip bi kutu daha koymak.
Şu yani:
https://prnt.sc/qe331l

Şu dizaynı yapamadım bi saattir kendimle cebelleşiyorum

Hocam oldu tamam çok teşekkür ederim eline sağlık:
https://cssgrid-generator.netlify.com/ şu siteyle çözdüm

Videolara'da vakit ayirin hocam daha detayli anlamak için işlerinizi daha kolaylaştirir.

https://www.youtube.com/watch?v=t6CBKf8K_Ac

22-12-2019, 16:15:22

#5

YasinGNC

caylakgirisimci adlı üyeden alıntı: mesajı görüntüle

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.

22-12-2019, 17:57:55

#6

caylakgirisimci

YasinGNC adlı üyeden alıntı: mesajı görüntüle

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.

Aradığım kod 3. dive grid column vermekmiş yani hocam

) çok teşekkürler. Bunu öğrendiğim iyi oldu.
Hocam peki, 3. dive ayrı boyut vermek için nasıl yaparız?
Bu anlattığın şekilde 3. div tamam %100 oluyor ama mesela %70 vermek istedim diyelim o zaman ne yapacağız?
Hatta şöyle diyelim:

[30%][70%]
[60%][boşluk]
[100%]

böyle bir şey çıkartmak istiyorum diyelim, bunu nasıl yaparız?

22-12-2019, 22:07:03

#7

YasinGNC

caylakgirisimci adlı üyeden alıntı: mesajı görüntüle

Aradığım kod 3. dive grid column vermekmiş yani hocam

) çok teşekkürler. Bunu öğrendiğim iyi oldu.
Hocam peki, 3. dive ayrı boyut vermek için nasıl yaparız?
Bu anlattığın şekilde 3. div tamam %100 oluyor ama mesela %70 vermek istedim diyelim o zaman ne yapacağız?
Hatta şöyle diyelim:

[30%][70%]
[60%][boşluk]
[100%]

böyle bir şey çıkartmak istiyorum diyelim, bunu nasıl yaparız?

İlk işiniz yapacağız tasarım için bir grid oluşturmak olsun. Dediğim gibi yüzde değil fraction olarak düşünün. Allta sorunuza örnek verdim. Firefox ile gridi inceleyebilirsiniz. https://developer.mozilla.org/en-US/...e_grid_layouts şöyle harika bir tool var. Yardımcı olacaktır.

https://codepen.io/yasingencnet/full/ZEYKKZN

22-12-2019, 22:12:13

#8

caylakgirisimci

YasinGNC adlı üyeden alıntı: mesajı görüntüle

İlk işiniz yapacağız tasarım için bir grid oluşturmak olsun. Dediğim gibi yüzde değil fraction olarak düşünün. Allta sorunuza örnek verdim. Firefox ile gridi inceleyebilirsiniz. https://developer.mozilla.org/en-US/...e_grid_layouts şöyle harika bir tool var. Yardımcı olacaktır.

https://codepen.io/yasingencnet/full/ZEYKKZN

Çok teşekkür ederim hocam, Pm attım ona da bir bakarsanız çok mutlu olurum.
Ek olarak bootstrap gibi kütüphaneler kullanmıyor, saf html css ile tasarım yapıyorsak genelde grid kullanmalıyız değil mi? grid iyidir yani, çoğu problemi çözer responsive için?

22-12-2019, 22:25:51

#9

YasinGNC

caylakgirisimci adlı üyeden alıntı: mesajı görüntüle

[/URL]

Çok teşekkür ederim hocam, Pm attım ona da bir bakarsanız çok mutlu olurum.
Ek olarak bootstrap gibi kütüphaneler kullanmıyor, saf html css ile tasarım yapıyorsak genelde grid kullanmalıyız değil mi? grid iyidir yani, çoğu problemi çözer responsive için?

Grid deyince konu karışıyor. Bunlardan biri css grid, diğeri oluşturduğunuz yapı.İkisine de grid diyoruz.

.container{
max-width: 992px;
margin-left: auto;
margin-right: auto;
}

şu tanımlama sizin için grid olabilir. Bunu sitenin ana gövdesi olarak her yerde kullanırsınız. Adına grid dersiniz.

.products{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 15px;
}

Bu da css griddir. Products adında bir section mesela. İçine ürün kartlarını yerleştirirsiniz. Mobile geçince

@media screen and (max-width: 767px){
.products{
grid-template-columns: 1fr 1fr;
}
}

diye tanımlama yaparsınız. Mobilde yan yana 2 adet kart gözükür. Yani grid değilde düzgün yazılmış her css iyidir. Tüm problemleri çözer