v2.5.2
Giriş yap

display-grid vs Bootstrap

ssametogetme
532 defa görüntülendi
3

Cümleten selamın aleyküm . Css'te display grid sistemini öğrenmeye başladım bootstrap grid sistemiyle arasındaki fark nedir grid sistemini anlamaya çalışıyorum hangisi daha avantajlı . Yanıtlarınız için Teşekkürler

css beyinfırtınası
Cevap yaz
Cevaplar (3)
tayfunerbilen
990 gün önce

hangisi daha avantajlı derken karşılaştırma yapabileceğin 2 farklı şey yok ortada, bootstrap grid yapısı için flex modülünü kullanıyor cssteki.

oysa senin cssde kullanabileceğin hem flex hem de grid modülü var ayrı ayrı. ve grid modülü inanılmaz esnek, kendine uygun bir yapıyı css grid ile oluşturmak elbette daha mantıklı.

ama benim tavsiyem bir de tailwind'e bak grid yapısı için, sevebilirsin :)

2
#007176
tayfunerbilen
990 gün önce

bootstrap grid yapısı için flex özelliğini kullanıyor, yani display: flex olarak ayarlıyor kapsayıcı etiketini içindeki elemanlarıda ona göre içindeki 12lik grid sistemine göre col-x ile ayarlayıp gösterebiliyorsun.

css'in grid yapısında ise display: grid diyorsun ve örneğin 12'lik bir grid sistemi kuracaksan grid-template-columns: repeat(12, 1fr) diyerek 12'lik grid sistemini kolayca oluşturuyorsun.

Örneğin 12'lik bir grid kapsayıcısı oluşturalım.

.grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 10px;
}

her bir kolon için kapsayacağı ayarlamaları yapalım.

.col {
	background: #ddd;
}
.col-2 {
	grid-column: span 2;
}
.col-3 {
	grid-column: span 3;
}
.col-4 {
	grid-column: span 4;
}
.col-5 {
	grid-column: span 5;
}
.col-6 {
	grid-column: span 6;
}
.col-7 {
	grid-column: span 7;
}
.col-8 {
	grid-column: span 8;
}
.col-9 {
	grid-column: span 9;
}
.col-10 {
	grid-column: span 10;
}
.col-11 {
	grid-column: span 11;
}
.col-12 {
	grid-column: span 12;
}

html'de şöyle olsun

<div class="grid">
    <div class="col">col-1</div>
    <div class="col">col-1</div>
    <div class="col">col-1</div>
    <div class="col">col-1</div>
    <div class="col col-8">col-8</div>
    <div class="col col-2">col-2</div>
    <div class="col">col-1</div>
    <div class="col col-4">col-4</div>
    <div class="col col-3">col-3</div>
    <div class="col col-2">col-2</div>
</div>

sonuç: https://codepen.io/tayfunerbilen/pen/yLXOZNa

1
#007179
ssametogetme
990 gün önce

Üstadım ben css'e yeni başladım şuan display flex özelliği bitti display gridi öğreniyorum . Bootstrap'ı bilmiyorum sadece anladığım bootstrapta bir hazır grid sistemi var , 12 kolon ve tüm içerikleri o 12 kolonun içinde kalacak şekilde yazıyoruz . Fakat css'teki normal display grid yapısından farkı nedir onu anlamadım. Bootstrapla ilgili tek bildiğim csste yaptığın şeylerin hazır sınırlı halini verdiği başka bir bilgim yok. O nedenle dediğini biraz basitleştirerek anlatabilirsen çok mutlu olurum .

0
#007177