CSS elemanları yan yana sıralama

TeknoEmir

TeknoEmir

Hectopat
Katılım
9 Ocak 2021
Mesajlar
394
Daha fazla  
Cinsiyet
Erkek
Selam. Kendimi geliştirmek adına örnek bir hesap makinesi yapmak istedim. CSS tarafında yaptığım butonları 3x3 olarak ayarlamak istiyorum. Bunu nasıl yapabilirim? Teşekkürler.

buttons.png
 
Tarihe göre sırala Puana göre sırala
TeknoEmir dedi:
Selam. Kendimi geliştirmek adına örnek bir hesap makinesi yapmak istedim. CSS tarafında yaptığım butonları 3x3 olarak ayarlamak istiyorum. Bunu nasıl yapabilirim? Teşekkürler.

Eki Görüntüle 1545621
Genişletmek için tıkla...
HTML: 
<div class="container">
    Butonları bu divin içine koyun.
</div>
CSS: 
.container {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(3, 1fr);
}
 
Artı 0 Eksi
kaan.w dedi:
HTML: 
<div class="container">
    Butonları bu divin içine koyun.
</div>
CSS: 
.container {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(3, 1fr);
}
Genişletmek için tıkla...
Güzel cevap. Ya grid yada Flexbox kullanacaksın. Arkadaşın verdiği örnek grid sistemi.
 
Artı 0 Eksi
TeknoEmir dedi:
Hocam yanlış bilmiyorsam Grid responsivdede işe yarıyormuş. Fakat Flex hakkında bilgim yok.
Genişletmek için tıkla...
Şu link sana fazlasıyla yardımcı olacaktır.
css-tricks.com

CSS Flexbox Layout Guide | CSS-Tricks

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser...
css-tricks.com css-tricks.com

TeknoEmir dedi:
Hocam çözülmedi
Genişletmek için tıkla...
@kaan.w çözümü; Edit fiddle - JSFiddle - Code Playground
 
Artı 0 Eksi

Benzer konular

ErrorCorrection
  • Çözüldü
Çözüldü  CSS yazılar yan yana gelmiyor
3 4 5
Mesaj
41
Görüntüleme
4.746
300319
3
I
DataTable Liste Yan Yana Geliyor
Mesaj
1
Görüntüleme
380
dgknbzglu
dgknbzglu
jevousaime
  • Çözüldü
Çözüldü  İki H1 etiketini yan yana yazabilmek
Mesaj
7
Görüntüleme
320
jevousaime
jevousaime
sevilay06
  • Çözüldü
Çözüldü  Yan yana mobil uyumlu kutular yapmak
Mesaj
3
Görüntüleme
964
dgknbzglu
dgknbzglu
SadeceBirİnsanAHuman
  • Çözüldü
Çözüldü  Görsel ile divi yan yana getirmek
Mesaj
8
Görüntüleme
1.207
RaSGooL
RaSGooL

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı