40 Dakikada CSS Grid Yapısı

Merhaba,
Bu dersimizde CSS'in en son ızgara yapısı olan CSS Grid yapısının temel özellikleri üzerine konuştuk. 2 boyutlu ızgara yapısının avantajlarını anlatmaya çalıştım.

[@8bitlikadam920]

Kral sayende grid sistemi öğrendim. Flexbox'ın içinden geçmiştim, üstüne bunu da ekledim. Sağolasın.

[@yusufaydinay9854]

Reis eline sağlık çok iyi anlatmışsın. Float devri zaten bitti. Bence flexbox , hızla artan mobil cihazlar için reponsive tasarım için can simidi olmak adına yetişti ama gelecek bence tam manası ile Grid. Grid'i sizler sayesinde çok iyi öğrendim. Her yerde kullanıyorum. Sitemi 16 kolona bölerim. Daha iyi hakim olmamı sağlıyor. Ana içeriğim main'i tagını ayrıca tekrar grid sistemiyle ayrıca 16lık sisteme yine bölüyorum. İç içe grid yapıyorum. nav menüleri'de aside'leri bile grid ile yapıyorum. Sadece grid-template-areas komutuyla calısıyorum diyebilirim. Siteme o kadar iyi hakim olmamı saglıyorlarki ne flexbox kullanırım ne de float ve responsive yaparkende cok rahatlık saglıyor

[@shewphank]

grid ve flexbox ın farkını sorabilirrmiyim

[@ArinYazilim]

çok güzel google sorusu :)

[@alihuseynhasanov9937]

Teşekkürler. Çok açıklayıcı ve öğretici olmuş.

[@ArinYazilim]

Yorum için teşekkür ederim.

[@oscarcollerde4375]

css grid ile ilgili BİTİRİCİ VURUŞ u yapmışsın, güzel anlatımın için teşekkürler..

[@dilqdirov2973]

kifayet ettimi bu ders grid icin

[@yigit2505]

Hayatımda gördüğüm en iyi grid anlatımıydı net.Benim hatam sizin kanalınız varken bunu başka yerlerde aramam.Cansınız hocam.

[@ArinYazilim]

Saolasın Yiğit, iyi bayramlar bu arada :D

[@yigit2505]

@@ArinYazilim Hocam çok özür dilerim bayramınıızı kutlamak aklıma gelmedi.Hayırlı,bol bereketli bayramlar.Ellerinizden öper,hürmet ederim.Sevgi ve saygılarımla.

[@mehmetilhan6083]

Hocam çok teşekkürler .Grid system css diye arattım,normalde yabancı videoları izlerken sizin video çıktı karşıma.Siz olunca da gerisi hikaye zaten diyip girdim.Güzeldi :)

[@orxanaliyev6767]

Hocam cox gozel izah etmisen.hec udemydeki kurslarda bele gozel soylemirler Azerbaycandan sevgiler

[@MrBaykalcelik]

ellerine sağlık. anlatımın süperdi hocam.

[@selcukerdogan5420]

çok teşekkürler hocam emeğinize sağlık

[@ArinYazilim]

Saolasın Selçuk.

[@Baran76x]

hocam video 6 yıl önce hmtl 5 geldi güncel sayılır mı bu video

[@deathclose4030]

emeğine sağlık mantığını anladım sayende işin gücün rastgelsin hakkını helal et

[@ArinYazilim]

Ne demek helali hoş olsun.

[@yureklabs3762]

Flex-box'a alışmış biri olarak grid yapısını anlayamıyordum. Sayenizde anlaşıldı çok teşekkür ederim.

[@deniz9741]

Gridi kabul etmiyor. İnvolid property value diyor. Kolon yapamadim bir türlü

[@myytkn8526]

Hocam, bu Section'lerin icine text ve resim eklememiz icin, section'lara hangi section numarasi ise o numara göre numaralari css'de vermemiz lazim degilmi?! Örnegim section 1'e resim koymak istiyorsak mi?

[@astroONE1]

Hocam grid leri yan yana getirmek istiyorum nasıl yapabiliriz

[@EmreKaradumanTV]

Grid efsane hoca efsane sobanın üstüne koydum 20 tane kestane.

[@dusunce7790]

Flex konusunu araştırır iken, önce flex videonuzu izledim ve oldukça faydalı oldu. Sonra dedim şu grid için bir video var mı onuda çekmişsiniz. Ellerinize sağlık, oldukça faydalı oldu.

[@kamranzizov1856]

Teshekkur ederim.Gerchekten faydali olmush.Direk ingilizce kursdan anlamak zor oluyor bazi kisimlari,fakat sayenizde ishin mantigini anladim.MUHTESHEMSINIZ!

[@uzayınmasalları]

Final oncesi nasil bi tekrar yapsam diyordum, simdi sizin anlattiklarinizi anlatmaya karar verdim. Hocam seneyeki ogrencilerim daha sansli olacak cok acik anlatmissiniz. Ornek model alacagim sizi, tesekkur ederim :)

[@ArinYazilim]

Emel Hanım çok saolun. Şimdiye kadar aldığım en anlamlı mesaj, çok teşekkürler.

[@afganhasan4521]

cok cok sag oluk. super bir ders

[@umithanvice7160]

Çok açıklayıcı bir anlatım,teşekkürler.

[@ArinYazilim]

Rica ederim Ümitcan.

[@WaffenVerband]

Teşekkürler hocam

[@wwloyd]

teşekkürler hocam

[@onrecord7635]

Tesekkurler hocam

[@zuleyhaso3308]

Elinize Emeğinize sağlık. Çok faydalı oldu.

[@sS-bn4pi]

Harikaydı, çok teşekkürler.

[@mehtapugur6422]

teşekkürler

[@mehtapugur6422]

teşekkürler

[@apikontor]

Hocam emeğinize ağzınıza yüreğinize sağlik

[@salihkalender9492]

Hocam elinize sağlık çok kaliteli ve sağlam bir içerik olmuş, böyle videoların devamını bekliyoruz

[@ArinYazilim]

Alirim bi abonelik o zaman :)

[@salihkalender9492]

@@ArinYazilim Tabiki :)

[@serkanakman9945]

Hocam çok teşekkür ederim Ağzınıza sağlık başarılar

[@ArinYazilim]

Rica ederim Serkan, selamlar, sevgiler..

[@lypamelitte]

Harika olmus, cok iyi anladim! Emeginize saglik!!

[@ArinYazilim]

Cok tesekkur ederim. Bazen motivasyonum dusuyor, boyle mesajlari daha bol bekliyorum :))))

[@lypamelitte]

Arin Yazilim çok iyi anlıyorum motivasyon düşmesini ben de yaşıyorum :( ama gerçekten video çok temiz anlatmış, bookmarklarıma ekledim bir kaç defa izleyeyim diye 😁 şimdi tek eksiğim içerik eklemek ve bootstrap ile responsive ayarı vermek kaldı 😊😊 sayfanıza da abone oldum, ileride çok işe yarayacak benim için. Tekrar çok teşekkürler ☺️

[@cantan7272]

Bu grid yapisi internet exploerde calismiyor. Kodlari firefoxta denedim calisiyor. Guzel bir calisma. Kisa bir surede site iskeletini yapabiliriz. Bir kac tane sorum var cevaplarsaniz memnun olurum.1-Ders anlatimindaki ornek butun sayfayi kapliyor. Bu boyutlari istedigimiz uzunlukta verebiliriz? Mesala ben sitenin 800px olmasini istiyorum.2-Boyutunu belirledigimiz site iskeletini nasil sayfada ortalayabiliriz?3-Kodlari aynen yazmama ragmen grid-template-areas bende calismadi neden?.genel { display:grid; grid-template: 150px 250px / 250px 3fr 1fr; grid-gap: 10px 10px; grid-template-areas: "A B C" "D E F" } kutu1 {grid-area: A;} kutu2 {grid-area: B;} kutu3 {grid-area: C;} kutu4 {grid-area: D;} kutu5 {grid-area: E;} kutu6 {grid-area: F;}

[@mhmtarda]

Gerçekten çok faydalı oldu. Çok güzel ve anlaşılır anlatmışsınız. Emeğinize sağlık. Hemen abone oldum.

[@ahmetloca]

Teşekkürler Gürcan hocam. Emeğinize sağlık :)

[@kadirramazn]

Hocam table yapısının gelişmiş hali gibi öğrenmem kolay oldu çünkü table da baya uğraşmıştım lisede :D

[@senkasim]

İyi ki varsınız

[@ayhanexe9455]

Sonunda bu kadar güzel bir yapıyı anlaya bildim flex iyiydi bu dahada iyi geldi çok teşekkürler

[@recaisafak1541]

Emeğinize sağlık Hocam

[@yamac6816]

Hocam bu serinin devamı gelicektir inşallah

[@ArinYazilim]

Bu ders seri değil temel grid yapısına giriş, bundan sonrası çalışmaca.

[@zaytungbonn184]

bu kadar da basit anlatılmaz hocam ağzınıza sağlık.

[@emregokcam]

Hocam ağzınıza sağlık. Teşekkürler. Çok faydalı oldu.

[@HasanYilmaz-dedi]

Teşekkürler. Epey faydalı bir ders oldu.

[@siyahlider9769]

Css grid yazınca ilk video burası çıktı. Güzel denk geldi. İlk bilgileri buradan aldım şimdi pratik zamanı. Faydalıydı.Emeğinize sağlık.

[@siyahlider9769]

@Альтернативные истории игр Gayet iyi gidiyor.

[@cebraill]

Teşekkürler, emeğinize sağlık hocam..

[@elegance81]

Çok teşekkürler. Derslerinizi seviyoruz..

[@biolog1]

Hocam ağzım açık kaldı resmen. Matematikte matris diye bir konu var onu andırdı bir an. Teşekkürler

[@ArinYazilim]

doğrudur :) ama o kısım kavrandıktan sonra grid yapısı çok kolaylaştırır işleri

[@huseyinkara123]

E posta adresinizi alabilir miyim ?

[@fatihzeyrek5160]

iyi ki varsınız hocam

[@alitoprak6090]

Mükemmel anlatım. Teşekkürler.

[@furkankochan419]

Reis eline ağzına sağlık

[@alidemircomtr]

Hocam merhaba, tabloda en üst (başlık) satırını sabitleyebiliyormuyuz css ile? excel de ki gibi satırı dondurup altındakiler scroll bar ile kayacak!

[@ArinYazilim]

Evet. Css te position fixed konusunu inceleyin.

[@KamilovAqil]

position: sticky; top: 0; bununlada yapa bilirsiniz

[@karlmaxweber]

Hocam, diyelim ki 38:12'de olduğu gibi section 6 bölümü boşa çıktı ve sayfanın düzenini bozdu. Bu bölümü nasıl kaldırabiliriz? Yani nasıl görünmez kılabiliriz.

[@KamilovAqil]

display: none;

[@KamilovAqil]

ve ya visibility; hidden;

[@FurkanGulsen]

çok güzel anlatmışsınız hocam. Çok teşekkür ederim :)

[@suleymanismaylov3014]

Tek kelime ile mukemmel, sondaki grid-area inanilmaz, o kadar position, float, flexbox kullanmaktansa bu daha mantikli

[@azerehmedov6680]

aynen abi ya flex baya baydirmisdi beni

[@yusufaydinay9854]

Hocam , araştırmalarıma göre flexbox tek boyutlu ya Y ekseni yada X ekseni etrafında calısıyorsun. Grid sisteminde X Y sistemini aynı anda kullanabiliyorsun buda caprazlama bir tasaırm bile sunuyor sana. İlk başlarda gerçekten zorlanıyorsun ama alıştığın zaman varya.... heleki sadece gred-template-areas komutunu idrak etsen bile rahatlıkla gridi tam randımanlı kullanabiliyorsun. Siteyi haritalıyorsun ve istediğin kadar kolona bölebiliyorsun. Sitediğin içeriğe de istediğin kadar kolonu verebiliyorsun. Bu da sitenin istediğin alanına istediğin içeriği eklemeni saglıyor. Mesela html'de divleri üst üste yazdıgında , yazım sırasına göre ekranda görünüyor bunu css'de position relative ya da tam bagımsız yapmak için absolute diye sekillendiriyorsun istediğin yere left diye dayıyorsun ya da flex box ile o div'i flex komutlarıyla değiştirebiliyorsun. Ama Grid sistemini düzgün bir sekilde kurdugun zaman tek bir harf ile o divi alıp sayfanın en ucra kösesine bile koyabiliyorsun. Mesela ana div'i gridle kuruyorsun sonra da ana içeriklerini koydugun main tag'inin bulundugun bölgeyi tekrar ayrıca gridle sutunlendirebiliyorsun. Bu article'leri cok rahat bir sekilde bloglamayı saglıyor. Bunları flexbox ile de yaparsın ama kod yıgınları cıkar ortaya. Hem x hemde y boyutu için ayrı ayrı ugrasıyorusn. Grid ile tek kalemde işi bitiyorsun. Bence bu Grid sistemi gittikçe gelişecek. Çünkü güncellenmeye çok müsait bir sistem. Bende tırstım ilk basladım da özellikle bu kanal ve bir kanal sayesinde daha iyice kavradım ve nasıl bir nimet oldugunu anladım. Float 1 kum tanesi Flexbox bir çöl ise Grid bir gezegen yapılandırmasıdır diyebilirim. Grid'i biraz fazla övdüm galiba ama sistemi idrak edince sagladıgı nimetleri anlıyorusn

[@tuna8896]

merhaba hocam aklıma takılan bişey var bir sitenin genel iskelet hatları display:grid ile yaparsak mesela header, section ve footeri hocam geri kalan içerik kısımları display:flex ile mi yapılır hocam ?

[@ArinYazilim]

Yapılır Tuna. Hatta genel yaklaşım belirttiğin şekildedir.

[@tuna8896]

@@ArinYazilim tşk ederim hocam

[@tuna8896]

hocam mail adresini varmı size yaptığım temayı göstersem vaktiniz olur mu ?

[@xeyyamismiyelizade4918]

elasiz cox tesekkur edirem

[@Jamesis07]

Adamsin hocam güzel ders oldu:)

[@ArinYazilim]

Saolasın müdür, merak ettim hocam ne ile ilgileniyorsunuz siz?

[@Jamesis07]

@@ArinYazilim web tasarim yani öğreniyoruz Kanaliniz baya fayda etdi ediyor saolasin:)

[@musayazlk7654]

Hocam ses kalitesini biraz daha geliştirmelisiniz. Videoda sanki klavye kullanımı gibi bir ses var başlangıçta.

[@woodiz5334]

İlk Yorum.

[@ahmetozturk3559]

?

[@kkslzw7479]

peki flex mi kullanmak gerek grid mi?

[@ArinYazilim]

O zaman yalnızca birinin olması yeterli olurdu. Eğer sütun ve satırlarınız düzgün ile flex, duvar yapısı gibi karışık ise grid fikrimce.