Neden Grid CSS kullanmalısınız?
CSS Grid çok harika bir teknolojidir ve bence giderek daha fazla WordPress geliştiricisi bunu bilmeli ve kullanmalıdır. Bir CSS uzmanı olmasam da, bu yüzden size Grid CSS’yi öğrenmenizi söylemeye uygun hissediyorum: eğer bu AHLI olmayan onu harika ve kullanışlı olarak düşünebilirse, elbette bilmeniz gereken bir teknoloji olarak geldi. Bu makalede, Grid CSS’nin ne olduğunu, mevcut CSS sistemiyle olan farkı ve neden öğrenmeniz gerektiğini tartışıyoruz. Temel bilgileri tartışacağız ve ayrıca başlamanıza yardımcı olmak için sizi çok yararlı kaynaklara ve CSS ızgara öğreticilerine bağlayacağız.
CSS’nin WordPress’teki (ve benim rolüm) dalış yapmadan önce rolü, biçim kaydı hızlıdır. WordPress ile ilgili garip şeylerden biri, CSS’nin “Ortogonal” ın WordPress’in çekirdeğinin gelişiminden nasıl geldiğidir. Demek istediğim, CSS’nin WordPress geliştiricileri tarafından ihtiyaç duyduğu uzmanlığın önemli bir parçası olması, ancak CSS bilgisi de WordPress ile neredeyse hiçbir bağlantısı olmayan bir uzmanlıktır. WordPress’in bir Body_Class işlevine sahip olduğunu bilmenin yanı sıra, çoğunuz CSS’yi WordPress’i düşünmeden öğrenebilirsiniz. Bunun nedeni, CSS’nin HTML’nin bulunduğu her yerde kullanılması ve orta olmasıdır. Ve tıpkı HTML’nin özel olarak WordPress ve CSS için olmadığı gibi. Ancak bu, bir WordPress geliştiricisi olarak HTML ve CSS’nizi 10 yıl önce yazmanız veya yazmanız gerektiği anlamına gelmez. Ve şimdiye kadar bu konuda oldukça suçluyum.
WordPress’e olan ilgim çoğunlukla basit yayıncılık görevleri için ve PHP yan sunucu kodu yazmak için başka yerler bulmama izin vermek için, birkaç dakika CSS hakkında çok fazla düşünmüyorum. Bu, zaman zaman kişisel bir proje için CSS yazmadığım anlamına gelmez, sadece bana CSS uzmanı demeyeceğim. CSS Grid nedir? Öyleyse, CSS Grid’e geri dönelim. CSS ızgarasını insanlara açıklamaya çalışırken savaştığım şeylerden biri, “Oh, CSS’de ızgara sistemini yıllardır kullandık” gibi insanlar. Ve bu insanlar (Fred dahil) doğrudur. Izgara bazlı düzen kullandılar, iki binden beri CSS ile mümkün. Ancak ızgara tabanlı düzen “CSS ızgarası” ile kastettiğim değil. Farkı daha da vurgulamak için, tüm makalede (tip) yeni CSS standartları hakkında konuştuğumda “css ızgarası” diyorum ve “ızgara düzeni”, web sayfaları, posterler veya diğer tasarımları sağlamak için sistematik ızgaralar kullanarak genel fikirler anlamına geliyor. Kohezyon tadı ve eğlenceli simetrisi. Tasarımdaki ızgaraya genel bakış
Yani düzen için bir ızgara kullanmak kesinlikle benden daha yaşlı. Deneyimli veya eğitimli bir tasarımcı olmadığım için tarihini sunmaya cesaret edemeyeceğim. Ancak belki bir sayfa olduğu sürece, sayfada bir tasarım sistemi uygulama çabası olduğunu söylemek yeterlidir.
Bu tür duyarlı ızgara sistemi, neredeyse sadece kullanılmış ve söylentiler bilgisi ile bildiğim bir şeydir. Fred ve ben 2013’te birlikte çalışmaya başladığımda CSS’imi güncel tutma çabalarını görmezden geldim ve o zamandan beri CSS olarak artık iyi değildim. (Belki hiç iyi olmadım, ama bu başka bir konuşma.) Grid CSS (ve değil) “CSS ızgarası” ile kastettiğim şey “başkaları tarafından yazılan CSS’yi kullanan duyarlı bir ızgara sistemi” veya ” Düzen sistemi ızgarası şamandıra gibi şeyler kullanıyor. “Bunun yerine,” CSS Grid “ile kastettiğim, ızgara sisteminizin çok fazla sütuna ve çok fazla satıra sahip olduğunu ve bu içeriğin iki tane içermesi gerektiğini kolayca beyan edebileceğiniz bir CSS-Asli sistemidir. Sütun bir tane alırken. Ve 12 sütun kafesi yerine, 5 sütun ızgarası veya iki sütun yapabilirsiniz. Bu çok güçlü.
Orijinal ızgara sistemi CSS’nin gücü sizin için açık olabilir, ancak bu büyük bir fayda olarak gördüğüm şey budur:
Herhangi bir üçüncü taraf kodu çekmeden, düzen şeylerini makul bir şekilde yapabilirim.
Şamandıra merkezli CSS düzeninin son tam ölümü. 🙌.
Önceki “ızgara çerçevesi” nin çok esnekliği verildi. Sitenizin yan tarafındaki bir şey ve ardından esnek sayfanızın dağıtımı için sabit bir geniş sütun mu istiyorsunuz? Oh evet, bizde var.
Bazı öğreticiler + harika CSS ızgara araçları, dediğim gibi, CSS ızgarasını (Seviye 1) derinlemesine açıklamak için hedefim. Birkaç kez kullandım, ama kendimi nasıl kullanacağım konusunda bir uzman olarak görmüyorum. Bunun yerine, sizi sadece CSS ızgarasına ayarlamak için yararlı olduğunu düşündüğüm birkaç kaynağa yönlendirmek istiyorum. CSS Grid CSS kullanabilir miyim? CSS Grid vs Flexbox Bugün CSS Grid’i kullanarak güvenli ve “Polyilfill” olmadan olabilir misiniz? Mümkün. Genellikle bu tür bir soru için Canuse.com’a atıfta bulunuyorum ve dünya çapında% 92 veya trafiğin CSS GRID seviye 1’i desteklediğini bildiriyorum, karşılaştırma için bir temel olarak, en son ve alakalı teknoloji, Flexbox, dünya çapında% 98’i rapor eden istatistikleri kullanarak aynı. Dolayısıyla, bunların hiçbiri mümkün olan her ziyaretçi için herhangi bir sitede açıkça kullanılmayacaktır. Ama her ikisi de düşünmeniz gereken noktaya ulaşıyor. (Özellikle sitemiz gibi çoğu kitleyden daha teknik olan bir site çalıştırıyorsanız.) Ve bence CSS Grid vs Flexbox istatistikleri, bunlardan biriyle rahat hissediyorsanız, diğeri ile rahat hissetmeniz gerekebileceğini gösteriyor. . . (BTW, CSS uzmanları tarafından “Grid vs Flexbox” hakkındaki tartışmanın, çok farklı hedefleri ve kullanımları olduğu için zaman kaybı olan “kırmızı ringa balığı” argümanı olduğu söylendi. Daha fazlasını söylemek için gereksinimleri karşılamadım .)
Taman Grid CSS: Benim gibi eski bir okul iseniz, CSS Zen Garden’a aşina olabilirsiniz. İnsanların kavrulmuş bir stil ile CSS vs HTML’nin gücünü gösterdiği bir yerdi (CSS yeni olduğu kötü bir geçmişte). Izgara bahçesi aslında ilk başta düşündüğüm gibi güncellenmiş bir CSS Zen Bahçesi değildi. Bu, CSS ızgarasıyla sizi daha rahat hale getirmek için inanılmaz ve eğlenceli bir küçük oyun değil. Tekrar oynadım ve ızgara hakkında daha fazla şey öğrendim. Büyük Flexbox Froggy ile aynı kişiydi, ama sadece alakalı.
Buradaki bir başka Grid CSS ızgara kaynağı, Grid CSS’de daha iyi olmak için kullandığım veya bunu öğrenmiş olduğumu umduğum diğer kaynakların kısa bir listesidir.
Jen Simmon Land Landout Düzeni Serisi/YouTube’daki çalma listesi, CSS ızgarasının olasılığını ve gücünü gerçekten anlamaya başladığım ilk yer.
Örnek tarafından ızgara Rachel Andrew, snippet’leri kopyalamak için en sık görülen yerdir. Ben görsel bir öğrenciyim, bu yüzden CSS ızgarası örneğini taramanın ve tam olarak neye gittiğimi gösteren görüntüleri bulmanın ne kadar kolay olduğunu seviyorum.
Her şeyi anlamak için CSS ızgarasının başka bir bölümün başka bir sayfasına benzediğini öğrenin.
Beğendiğiniz bir öğretici veya başka bir ızgara CSS kılavuzunuz varsa, başkalarının bu önemli konuyu öğrenmelerine yardımcı olabilmeleri için lütfen yorumlarda bırakın.
