Grid ve FlexBox ile bir blog oluşturun

Sep 11, 2025
Nasıl Yapılır
Build a blog with Grid and flexbox

Son iki ila üç yıl Layout'un sıçramalarda ve sınırlarda ilerlemesini gördü. Artık bu modern tekniklerin modern tarayıcılarda böyle tutarlı bir sonucu olduğu için, onları üretim kodunuz için gerçekten kullanıyor olabilirsiniz. Eğer merak ediyorsan Bir blog nasıl başlatılır , Bu eğitim, CSS Grid ve Esnek Kutu Modülü, AKA FlexBox kullanarak standart bir blog tarzı düzeni oluşturmanın ne kadar basit olduğunu gösterecektir. İstediğin için çok fazla zor iş gibi geliyor mu? Rehberimize bir göz atın en iyi ücretsiz blog platformları veya bir üst seçin Web Sitesi Oluşturucu . Bir takımla çalışmak? En iyisini dağıtmak Bulut depolama işlemi pürüzsüz tutmak için.

İlk önce HTML'nin temellerini hızla özetleyelim ve neden anlamsal kod yazıp yazmanın iyi olduğu iyidir.

Masaüstü ve mobilden daha fazlası

Safari ve Firefox'ta okuyucu modunu fark ettiniz mi? Çizgili kağıt gibi görünen adres çubuğundaki bir simgedir. Bu senin Web Sitesi Düzeni Dikkat dağıtıcı içermeyen, çıplak bir kemik modunda, Apple Watch kullanımı gibi cihazlar gibi. Giderek daha fazla cihaz erişiyor ve web içeriğine erişiyor ve görüntüleniyor - muhtemelen Noel'in büyük holdisi Amazon Echo gibi etkileşimli hoparlörlerdi.

Bunlarla akılda ve elbette sitenizin ekran okuyucular üzerinde çalışması gerektiği ve benzerleri, sayfanızın yapısı çok önemlidir. Sadece kullanırsan & lt; div & gt; Tüm konteynırlarınız ve hatta düğmeleriniz için, kodunuzu oluşturan cihazlar, bağlamın ne olduğunu bilmez ve böylece yerel işlevsellik veya özelliklerden birini kullanamaz.

01. Temel sayfa düzenini başlatın

Navigasyon, bir kahraman bloğu, ana makale, özellikli makale blokları ve bir altbilgi içeren bir başlık eklemek için temel bir web sayfası inşa edeceğiz. Buradaki fikir birçok görmek Duyarlı Web Tasarımı Medya sorgularını veya yardımcı javascript kullanmadan uygulayabileceğimiz teknikler. Sayfanın HTML'nin HTML5 etiketlerini kullanarak farklı bölümlere ayrıldığını görebilirsiniz. Ayrıca, kendilerine sınıflar ekleriz, çünkü eski tarayıcıların ne olduklarını bilemeyecek ve onları bir div olarak oluştururuz. Sayfanın en üstüne başlayalım ve yolumuza gidelim. Bununla birlikte, sitenizin temel veya karmaşık olduğuna, hangisi hakkında düşünmek zamandır. ağ sağlayıcısı Hizmet sizin için doğru.

02. Bir site başlığı oluşturun

Build a blog with Grid and flexbox: Site header

Bu başlık için herhangi bir sargı veya konteyner gerekmez

Sitenin başlığı, navigasyon için bir logo ve sıradan olmayan bir liste içerir. Bunu, logonun sola ve tek bir satırda logonun solundaki logo ile yerleştirilmesi için herhangi bir sarmalayıcı veya konteyner eklememiz gerekmiyor. 

 & lt; başlık sınıfı = "başlık" & gt;

& lt; img src = "images / logo.png" / & gt;
& lt; nav & gt;
& lt; ul sınıf = "nav" & gt;
& l li & gt; bir href = "#"
Sınıf = "Active" & GT; HOME & LT; / LI & GT;
& l li & gt; a href = "#" & gt; yaklaşık & lt; / li & gt;
& l li ve gt; bir href = "#" & gt; köpekler & lt; / li & gt;
& l li & gt; a href = "#" & gt; temas & lt; / li & gt;
& lt; / ul & gt;
& lt; / nav & gt;
& lt; / header & gt;

03. FR birimini kullanın

Başlığı ızgarayı görüntülemek için ayarladık, sonra kullanın 'Şablon-sütunlar' Başlığa iki sütun ayarlamak için. Biz kullanıyoruz fr Buradaki birim, bir kesirli bir birim olan - 1FR, konteynerdeki mevcut alana eşit olur. Bu durumda, gezinmeyi doldurmak için biraz daha küçük bir alan veriyoruz. 

 başlık {
Ekran: Izgara;
Izgara şablonu-sütunlar: 1.5FR 1FR;
Hizala-Öğeler: Merkez;
}

04. Site Navigasyonu Ekle

Şimdi menü öğelerinin listesini hedefliyoruz. Yine biz çeviririz & lt; ul & gt; bir ızgara kabın içine ve içerideki maddelere sütunlara otomatik olarak anlatın. Burada kullanıyoruz en az en çok Sütunların asla 100px'ten daha küçük olmayabilmelerini sağlamak için, ancak boşluk daha büyükse, boşluğu her biri 1FR olarak paylaşabilirler. 

 .nav {
Ekran: Izgara;
ızgara şablonu sütunları: tekrarlama (otomatik uyum, minmax (100px, 1fr));
Izgara boşluğu: 10px;
Hizala-Öğeler: Merkez;
}

05. Kahraman bloğu oluşturun

Build a blog with Grid and flexbox: Hero block

Kahraman metninin merkezlenmesi, CSS ızgarası veya esnekliği ile çok daha kolaydır

Sayfanın bir sonraki kısmı ana kahraman bloğudur. Geleneksel olarak dikey olarak merkezleme konteynerindeki metni, her türlü çalışma etrafını doldurdu. CSS Grid veya Flex kullanarak, bu gerçekten basittir. 

 & lt; makale ve gt;
& lt; bölüm sınıfı = "kahraman" & gt;
& lt; h1 ve gt; / h1 & gt;
& lt; p & gt; / p & gt;
& lt; a href = "" & gt; / a & gt;
& lt; / bölüm & gt;
& lt; / Madde & gt;

06. Merkeze hizalanır

İki eksende hizalamak, ekmek ve CSS ızgarasının tereyağının bir parçasıdır. Burada, kahraman kabını bir ızgara kabına dönüştürebiliriz ve ardından kullanabiliriz. hizalama içeriği (soldan sağa) ve hakikat içeriği (yukarıdan aşağıya) Merkezi konumlandırmak için. Kullanıyoruz vh Buradaki birim, kahraman bloğunu viewport yüksekliğinin% 50'sini oluşturur. 

 .hero {
Min Yüksekliği: 50vh;
Ekran: Izgara;
Justify-Öğeler: Merkez;
Hizalama içeriği: Merkez;
Justify-Content: Center;
}

07. Ana İçerik bölümünü oluşturun

Ana makalenin ayrıca daha fazla okuma içeren sağa bir blok vardır. Bir medya sorgusunu kullanmak zorunda kalmadan bu duyarlayıcıyı yapmak için, özelliklerinden en iyi şekilde yararlanmak için FlexBox'a geçebiliriz. 

 & lt; makale sınıfı = "ana içerik" & gt;
Bölüm / ve GT;
& lt; / bölüm & gt;
& lt; kenara / ve gt;
& lt; / Madde & gt;

08. İki sütunlu bir görünüm ekleyin

Makaleyi bir esnek kabına ayarlayın. Metnin ölçüsünün çok uzun olmadığından emin olmak için sola ve sağa biraz dolgu ekleyin. Flex yönü satırdır, böylece bölümün ve bir kenara, tarz edildiğinde yan yana oturacaktır. İçerik, metnin bir kenara dokunmayacağı için aralarında uzaya haklı çıkarılır. 

 ana içerik {
Ekran: Flex;
Flex-Wrap: Sarma;
Esnek yön: satır;
haklı olarak içeriği: uzay arası;
Dolgu: 0 5VW 0 5VW;}

09. Medya sorguları olmadan yanıt vermesini sağlayın

Build a blog with Grid and flexbox: Responsive without media queries

Medya sorgularını kullanmak zorunda kalmadan duyarlı bir bölüm oluşturun

Bölüm, bize bir medya sorgusunu ancak bir konteyner düzeyinde etkili bir şekilde bir medya sorgusunu olanı sağlamak için akıllı bir Calc ve Minimum ve Maksimum genişlik bir karışımı kullanır. Yeterli oda olduğunda, bölüm ebeveynin% 70'ini alacak ve yanında oturmasını sağlayacak. Genişlik için Calcs kullanarak, büyük veya küçük bir genişlik döndürebiliriz. 

 Ana İçerik Bölümü {
Min Genişliği:% 70;
Genişlik: Calc ((48EM -% 100) * 1000);
Maksimum genişlik:% 100;
}

10. Bir mola noktası tanımlayın

48EM 768px'e eşittir (48 * baz yazı tipi boyutu (16px)) 768px üstünde, bölüm, minimum% 70 ve 768'in altındaki minimum genişliği kullanılacaktır. Maksimum genişlik kullanılacaktır. Bir kenara aynısını yapıyoruz, bu durumda, büyük ekranlarda ya da% 100'ü küçük başına% 25'ini alacak. Etki, konteyneri tamamen etkileyen duyarlı bir kırılma noktasıdır. 

 .main-içeriği bir kenara {
Min-Genişlik:% 25;
Genişlik: Calc ((48EM -% 100) * 1000);
Maksimum genişlik:% 100;
}

11. Duyarlı bloklar oluşturun

Build a blog with Grid and flexbox: Responsive blocks

Duyarlı bloklarınızı oluşturmak için konteyner divs kullanın

Sayfadaki öne çıkan özellikleri oluşturmak için nihayet ilk konteyner div'lerimizi kullanıyoruz. 

 & lt; bölüm sınıfı = "kart listesi" & gt;
& lt; div sınıf = "kart" & gt;
& lt; img / & gt;
& lt; div class = "kart ayrıntıları" & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / section & gt;

12. Tekrarla ve Otomatik Şekillendirme

Kart listemiz için üst üste dört tane olmak istiyoruz, ancak bizimizi belirlediğimiz herhangi bir medya sorgularını kullanmıyoruz. en az en çok Küçük bir cep telefonuna güzel bir şekilde sığacak 300px değeri. Tekrar ve Otomatik AutoFIT kullanarak tarayıcı sıkı çalışmayı yapar ve bir satıra ne yapabileceğini ve ardından bir başkasını başlatır, böylece dört ila tek bir sütun düzenine bir kod satırıyla gidebiliriz. 

 .Card listesi {
Ekran: Izgara;
Izgara boşluğu: 10px;
Izgara şablonu-sütunlar: Tekrarla (Otomatik Fit,
minmax (300px, 1fr));
}

.card {
 Ekran: Izgara;
 Izgara şablonu-sütunlar: 1FR;
}

13. Bir kart düzeni oluşturun

Karttaki detaylar için Flex'e geri döndüğümüzde, akışını sütuna ayarlayın, böylece öğeler dikey olarak akar. Yı kur hakikat içeriği Mülkiyet için - bu durumda uzay-eşitçe iyi çalışıyor. Bu paneldeki 'A' etiketi bloğu görüntüleyeceği için, kabın genişliğini uzatır. Ayarlamak flex-start Böylece sadece içeriğinin alanını alır. 

 .Card-detaylar {
Ekran: Flex;
Esnek Yön: Sütun;
haklı olarak içeriği: uzay-eşit şekilde;
}

.Card detayı a {
Hizala-Self: Flex-start;
}

14. Altbilgi tarzı

Biz zaten altbilgiye gidiyoruz ve sadece koymak için daha önce kullandığımız bazı stilleri istihdam edeceğiz. 

 & lt; footer sınıfı = "altbilgisi" & gt;
& lt; p / & gt;
& lt; nav & gt;
& lt; ul sınıf = "nav" & gt;
& l li / / gt;
& lt; / ul & gt;
& lt; / nav & gt;
& lt; ul sınıfı = "sosyal" & gt;
& l li / / gt;
& lt; / ul & gt;
& lt; / footer & gt;

15. Çocuk eşyasını hizalayın

Bu altbilgide üç alan var. Her biri bir kesirli ünitede üçünü tekrarlamak için ızgara sütunlarınızı ayarlayın. Sadece 'ızgara şablon sütunları: 1FR 1FR 1FR;' yazabilirsiniz. Eğer tercih edersen. Sosyal simgeler sağa doğru oturacaklar - bunu sağa hizalamak için eşyayı kendisini söyleyerek yapabilirsiniz. haklı çıkar . 

 .footer {
Ekran: Izgara;
ızgara şablonu sütunları: tekrar (3, 1fr);
Izgara-Otomatik Akış: Sütun;
Hizala-Öğeler: Merkez;
}

.Social {
Justify-Self: Sonu;
}

16. Uyumluluğu göz önünde bulundurun

Bu öğretici büyük üç tarayıcıya ve modern cihazlarda iyi çalışsa da, IE'ye geri dönmedi. Projenize bağlı olarak, ilerici geliştirme kullanabilir ve basit bir düzen sunabilirsiniz. CSS'iniz SASS gibi bir ön işlem kullanılarak oluşturulursa, AutoPrefixer paketi, kenar sevgilisi için gereken ekstra öneklerin bir kısmını sağlar.

Bu makale başlangıçta yaratıcı web tasarım dergisinin 284 sayısında yayınlandı. Web tasarımcısı . Sayı 284 burada satın al veya Burada web tasarımcısına abone olun .

İlgili Makaleler:

  • CSS ızgarasını kullanmak için kapsamlı bir rehber
  • Duyarlı bir arayüz oluşturmak için CSS Grid ve FlexBox kullanın.
  • 5 Cool CSS Izgara Jeneratörleri

Nasıl Yapılır - En Popüler Makaleler

Google'da Nasıl Değil

Nasıl Yapılır Sep 11, 2025

(Resim Kredisi: BuzzFeed) Böylece, Google'da nasıl sıralanacağını bilmek istiyorsunuz. İyi haber şu ki, herke..

marka tipografi: eksiksiz bir rehber

Nasıl Yapılır Sep 11, 2025

Pentagram, halka açık tiyatro için ısmarlama yazı yazdı. (Görüntü Kredi: Halka açık Pentagram) ..

Resimlerinde ölçek nasıl elde edilir

Nasıl Yapılır Sep 11, 2025

Bu eğitimde, büyük ölçekli fikrini kendi parçalarınızda iletişim kurmanıza yardımcı olacak bazı temel ilkeleri aşacağız. Bu öğretici için kalem ve yağ kullanıyorum, ancak..

Zbrush'ta bir video oyunu karakteri nasıl oluşturulur

Nasıl Yapılır Sep 11, 2025

Burada, Atstation'daki insan mücadelesi için yaptığım bir karakter, Rey oluşturma sürecinden bahsediyorum. Kendi video oyu..

Zbrush ve Maya'da 3B kişiyi modellemeyi öğrenin

Nasıl Yapılır Sep 11, 2025

Sayfa 1/2: Sayfa 1 Sayfa 1 Sayfa 2 ..

Etkileşimli bir paralaks görüntüsü oluşturun

Nasıl Yapılır Sep 11, 2025

Paralaks kaydırma Artık kullanıldığı garantili dikkat çekmesi yoktur, ancak ziyaretçilerinizi meşgul etmek ve geliştirmek içi..

X-Parçacıklar ile yeşillik büyümeyi öğrenir

Nasıl Yapılır Sep 11, 2025

Situ içinde büyüdükünün ortaya çıkmasına sahip olan statik bir bitkinin modellenmesi çok zor değil, aynı zamanda büy..

Tarayıcınızda Tasarım SVG Grafikleri

Nasıl Yapılır Sep 11, 2025

Vecteezy Editor Tarayıcınızda doğru çalışan ücretsiz bir vektör düzenleme süitidir. Bu öğretici, sitedek..

Kategoriler