CSS elemanları yan yana sıralama

TeknoEmir · 16 Ekim 2022

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.

Shankusu · 16 Ekim 2022

Benim bildiğim kadarıyla tuşlar için bir div oluşturmalısın ve genişlik ayarlamalısın. Onlar kendiliğinden sıralanıyordu. 2.olarak daha karmaşık bir şey vardı ama onu yazmaya üşendim

kaan.w · 16 Ekim 2022

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

HTML:

<div class="container">
    Butonları bu divin içine koyun.
</div>

CSS:

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

RaSGooL · 16 Ekim 2022

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); }

Güzel cevap. Ya grid yada Flexbox kullanacaksın. Arkadaşın verdiği örnek grid sistemi.

TeknoEmir · 16 Ekim 2022

RaSGooL dedi:
Güzel cevap. Ya Grid'ya da Flexbox kullanacaksın. Arkadaşın verdiği örnek Grid sistemi.

Hocam yanlış bilmiyorsam Grid responsivdede işe yarıyormuş. Fakat Flex hakkında bilgim yok.

kaan.w · 16 Ekim 2022

TeknoEmir dedi:
Hocam yanlış bilmiyorsam Grid responsivdede işe yarıyormuş. Fakat Flex hakkında bilgim yok.

Hocam sorun çözüldü mü?

TeknoEmir · 16 Ekim 2022

kaan.w dedi:
Hocam sorun çözüldü mü?

Hocam çözülmedi

RaSGooL · 16 Ekim 2022

TeknoEmir dedi:
Hocam yanlış bilmiyorsam Grid responsivdede işe yarıyormuş. Fakat Flex hakkında bilgim yok.

Şu link sana fazlasıyla yardımcı olacaktır.

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

TeknoEmir dedi:
Hocam çözülmedi

@kaan.w çözümü; Edit fiddle - JSFiddle - Code Playground

CSS elemanları yan yana sıralama

Ayrıntılı düzenleme

TeknoEmir

Hectopat

Shankusu

Hectopat

kaan.w

Megapat

RaSGooL

Kilopat

TeknoEmir

Hectopat

kaan.w

Megapat

TeknoEmir

Hectopat

RaSGooL

Kilopat

CSS Flexbox Layout Guide | CSS-Tricks

Benzer konular