CSS ızgarası ile duyarlı bir düzen oluşturun

Jan 28, 2026

Nasıl Yapılır

CSS Grid Düzeni Her gün tarayıcı desteğinde büyüyor ve CSS ızgarası üretime gönderebiliriz. CSS ızgarasının hızlı bir şekilde benimsenmesi gerçekten dikkat çekicidir.

CSS ızgarasıyla duyarlı bir portföy sitesi düzeni yapmadan önce, birkaç şeyi temizleyelim: CSS Grid, bir değiştirme değil Flexbox . Yüzme için bir yedek bile değil. Aslında, CSS Grid'in daha iyi yaptığı şeyleri yapmak için FlexBox kullandığımızı fark edebilirsiniz. Ancak, değiştirme açısından düşünmek yerine, kombinasyon açısından düşünebiliriz.

15 Gerçekten Yararlı Duyarlı Web Tasarım Öğreticileri

Bir fıstık ezmesi ve jöle sandviçi hayal edin. Fıstık ezmesi ve jöle kendi başlarına oldukça iyidir, ancak bir araya geldiklerinde, yeni bir şey doğar ve sihir olur.

Bu bizim Web Sitesi Düzeni Araçlar gibiydi. Bireysel olarak yaptıkları şeylerde harika, ancak birleştirildiklerinde sihir olur ve yeni ve heyecan verici düzenler yaratabiliriz. Bu örnekte, CSS Grid ve FlexBox ile bir Web Geliştirme PB & AMP; J'nin J'yi kendi yapacağız. Sürecinizi daha da basitleştirmek ister misiniz? İyi bir seçim Web Sitesi Oluşturucu .

01. İşaretlemeni ayarla

case study title repeated — Düzenimiz pek bir şey gibi görünmüyor, ancak altı eşyamızla iskeletin yerinde

Bu eğitimde, Duyarlı bir portföy düzeni oluşturmak için CSS Grid ve Flexbox'ı birlikte kullanacağız. Bu kutuların her biri farklı bir boyuttadır, bazıları satırlar arasında yayılır ve her kutunun altta oturmuş bir başlığa sahiptir. Bunun gerçekleşmesi için FlexBox ile birlikte gelen büyük hizalama araçlarından bazılarını kullanacağız.

İşaretlememizi kurarak başlayalım.

 & lt; ul sınıfı = "kutular" & gt;
  & l li & gt;
    & lt; div class = "boxes__text-wrapper" & gt;
      Vaka çalışması başlığı & lt; / h2 ve gt;
      vaka çalışmamız için akılda kalıcı bir açıklama. Çok çalıştık. & Lt; / p & gt;
    & lt; / div & gt;
  & lt; / li & gt;
& lt; / ul & gt;

Bu liste öğesini ve her şeyi altı kez çoğaltacağız, bu yüzden oynayacak eşyalarımız var. Merak ediyorsanız, kullanmaya karar verdik. ırmak Burada öğe, çünkü bu girişlerin bir listesidir. Size uygun hissettiğinizi kullanmaktan çekinmeyin.

Listenin içinde varız div sınıfı ile .boxes__Text-wrapper Bu, vaka çalışmasının başlığını ve eşlik eden açıklamasını içerecektir.

02. Temel stilleri yazın

case study title with different styling — Yazı tipimizi biraz daha güzel bir şeye koyduk ve varsayılan marjı başlıklar ve paragraflardan kaldırdık.

Şimdi çalışmak için bazı temel stilleri ayarlayalım.

 vücut {
  Yazı Tipi ailesi: Avenir, Sans-Serif;
  Marj: 2REM AUTO;
  Genişlik:% 95;
}
H2,
p {
  Marj: 0;
}
ul {
  Liste tarzı: Yok;
  Dolgu: 0;
  Marj: 0;
}
.boxes & gt; * {
  Dolgu: .5rem;
  Arka plan rengi: # 333;
  Beyaz renk;
}

Yazı tipini avenir olarak değiştirdik. Marjı başlık ve paragrafımızdan kaldıracağız ve sıralanmamış listeyi sıfırlayacağız. Her bir listeye, her birinin nerede olduğunu görmemize yardımcı olacak her bir liste öğesini varsayılan stilleri de vereceğiz.

03. Izgaranı kur

case study title with gaps between them — Sadece üç satırla, ızgara eşyalarımız arasında bir oluk ekledik ve onları biraz daha uzun sürdü.

Önce mobil için düzenimizi inşa etmek istiyoruz. Küçük ekranlardaki ızgaramızı ayarlamak, bu kadar kolaydır:

 .boxes {
  Ekran: Izgara;
  ızgara-otomatik satırlar: minmax (125px, auto);
  ızgara boşluğu: .5rem;
}

Izgara eşyalarımızı birbirlerinin üstüne yığacak, çünkü varsayılan olarak sadece bir sütun var. Her vaka çalışması arasında bir miktar boşluk oluşturacağız. ızgara boşluğu - Bu, satırlar ve sütunlar arasında bir oluk eklememize izin verir.

Sütunlara sadece karmaşıklık için bir marj eklemeyi unutun nth-çocuk seçiciler; oluklar sadece sütunlar veya satırlar arasında, asla bir sütundan sonra veya ROW.Grid-Gap Shorthand ızgara kolonu boşluğu ve ızgara satır boşluğu . Genellikle Longhand'ı kullanırız, ancak tarayıcı büyüdükçe her ikisinin de üzerine yazacağız, bu yüzden stenoyu kullanacağız.

Sonra, kullanacağız ızgara otomatik satırlar Şebeke konteynerimize yeni satırların yüksekliğini anlatmak için. Kılavuz, tüm içeriğimizi yerleştirmek için yeni satırlar yaratacaktır. Bu otomatik olarak oluşturulan satırların boyutunu kontrol edebiliriz. ızgara otomatik satırlar Emlak. Bizim için yeni bir işlev kullanıyoruz: en az en çok() . İle en az en çok() Minimum boyut ve maksimum boyut belirleyebiliriz.

Kodumuzla, satırlarımızın en az 120 piksel ve maksimum otomatik olmasını istediğimizi söylüyoruz. Otomatik burada kullanıyoruz çünkü içerik garanti ederse satırlarımızın büyümesini istiyoruz.

04. Büyük tarayıcı uyumluluğu ayarlayın

case study title in a row — Bizim ızgara şekil alıyor! Şebeke eşyalarımız arasında çalışmak için altı sütun var ve daha az oluk var.

Sayfamızı kuralım, böylece tarayıcımız 40EM veya daha büyük olduğunda, ızgara kabýrımızın her biri bir fraksiyonun altı sütunu vardır.

 @Media ekranı ve (min-genişlik: 40EM) {
  .boxes {
    ızgara şablonu sütunları: tekrar (6, 1fr);
    Izgara boşluğu: 2px;
  }
}

ızgara şablonu sütunları Kılavuzumuzun kaç sütun varlığının var olduğunu söylemek için kullandığımız mülk. Bildiğimiz tüm uzunluk birimleri ve sevgiyi kabul eder. rem , emzik , piksel , yüzdeler, vw , vh ve fr .

fr CSS ızgara düzeni ile aldığımız yeni bir birimdir. Bununla, tarayıcıya bizim yerine matematik yapmasını söyleyebiliriz - mükemmel.

Tarayıcıya bir fraksiyonun altı sütun oluşturmasını söyleyerek, tarayıcı ızgara kabının genişliğini hesaplar ve onu altı eşit sütuna bölünür. Ayrıca, ızgara akıllı olduğundan, yalnızca belirttiğimiz olukların hesaplanmasından sonra boşluğu bırakacak.

05. Stil Bireysel Öğeler

case study title with an image behind — Kahve her şeyi güzel görünmüyor mu? Ayrıca ince degrade başlığımızı ve açıklamamızı öne çıkarır

Vaka çalışmalarımız sadece gri kutular olarak küçük bir sıkıcı görünüyor. Bir arka plan görüntüsü ekleyelim, başlıklarımızı bu kutuların altında gösterilecek ve bir degrade ekleyelim, böylece başlığımızın öne çıkması için bir degrade ekleyin.

 .boxes li {
  arka plan görüntüsü:
    Doğrusal gradyan (RGBA (0,0,0,0), RGBA (0,0,0,0,8)),
    URL (yol / / görüntü);
  Arka plan boyutu: Kapak;
  Ekran: Flex;
  Hizalama-Öğeler: Flex-end;
}

Bu arka plan görüntüsü ücretsiz bir resim oldu Bozulmak , ama istediğiniz görüntüyü kullanmaktan çekinmeyin. Ayrıca, metninizi kutularımızın altına hizalamak için Flexbox'u karışıma getiriyorum. Bunu henüz görmeyeceksiniz, ama her farklı kutuyu yerleştirirken sonunda çalıştığını göreceksiniz.

06. Eşyaları ızgaraya yerleştirin

case study title with one image above and five below — Kılavuz, ızgara eşyalarımızı büyüklüğünü kolaylaştırır, ancak isteriz. Ama bu sadece başlangıç

Ne yazık ki, ızgara, başlangıçta gördüğümüz ızgara düzenine öğeleri otomatik olarak yerleştirmenin bir yolu yoktur. Ancak neyse ki bizim için, ızgara bize elle kolayca yapacak araçları veriyor. Bu eğitimde, her liste öğesini yerleştirmek için NTH-Child'i kullanacağız. Bir üretim web sitesinde, doğru planlama göz önüne alındığında, bir içerik ağır sitede böyle bir düzenlemeyi otomatikleştirmeyi mümkün kılan bir sınıfı kullanmanızı tavsiye ederiz.

İlk öğemizle başlayalım.

 @Media ekranı ve (min-genişlik: 40EM) {
  .boxes li: nth-child (1) {
    Izgara sütunu: 1 / -1;
    ızgara satır: SPAN 3;
  }
}

Tüm yerleştirme stillerimizi daha önce yazdığımız bu medya sorgusunun içine koyacağız, çünkü bu düzenin tarayıcımız 40EM veya daha büyük olduktan sonra gerçekleşmesini istiyoruz. İle nth-çocuk İlk liste öğesini hedefliyoruz. CSS Grid, eşyalarımızı ızgara sütun ve ızgara satırıyla kolayca yerleştirmemize izin verir. Öğelerin nerede olması gerektiğini belirtmenin birçok farklı yolu vardır, ancak burada öğemize sütun satırından başlayacak ve tüm konteyneri -1 ile kapsayacak şekilde söylüyoruz.

Ardından, ızgara satırıyla, öğeye üç satır açmasını söylüyoruz. Üç satırın istediğimiz boyutta olacağını nasıl biliyoruz? Peki, bu satırların boyutunu birkaç dakika önce ızgara otomatik satırlarıyla belirledik ve onlardan memnun değilsek, minimum boyutu değiştirebiliriz.

Öğelerimizin geri kalanını yerleştirelim.

@Media ekranı ve (min-width: 40em) {
  .boxes li: nth-child (2) {
    Izgara sütunu: SPAN 2;
    ızgara satır: SPAN 7;
  }

  .boxes li: nth-child (3) {
    Izgara sütunu: SPAN 4;
    ızgara satır: SPAN 3;
  }

  .boxes li: nth-child (4) {
    Izgara sütunu: SPAN 2;
    ızgara satır: SPAN 4;
  }

  .boxes li: nth-child (5),
  .boxes li: nth-child (6) {
    Izgara sütunu: SPAN 2;
    Izgara satır: SPAN 2;
  }
}

Kontrol ızgarası düzeninin bize ne kadar kontrol ettiği şaşırtıcı değil mi? Sadece birkaç kod satırı ile, daha fazla öğe eklendiğinde, kırılmayan tamamen duyarlı bir düzenini bir araya getirebiliriz.

Tabii ki, biraz wodky görünebilirler çünkü sadece bir ızgara sütununu alacaklar ve varsayılan olarak satır yapacaklar, ancak düzenimizi kırmaz. Bunu yüzenler ve sabit genişliklerle ve yüksekliklerle yapıyorsak, daha fazla içerik eklenecekse bağlandık.

finished layout with different images in different places — Bitmiş düzenimiz! Bu şaşırtıcı değil mi? Kılavuz, eşyalarımızı iki boyutta kolayca yerleştirmemize izin verir.

Eski tarayıcılar hakkında hızlı bir yana

Tamam, odadaki filin ele alınması zamanı geldi. 'Eski tarayıcılara ne?' Cevap bu sorunun cevabı, CSS'deki herhangi bir yeni özellik için olduğu ile aynıdır: Özellik sorgularını kullanın ve kaskadayı kucaklayın. Özellik sorguları çok iyi desteklenmiş Ve nereye gitmiyorlar? Örneğin, satırları boyunca bir şeyler yazarız:

 .Your-selector {
  Ekran: Flex;
}

/ * Izgara kodunuz * /
@supports (ekran: ızgara) {
  Ekran: Izgara;
  ızgara şablonu sütunları: tekrar (3, 1fr);
  Izgara boşluğu: 1rem 2rem;
}

Kodumuzu bu şekilde yazmak, tarayıcı ızgara düzenini anlarsa, FlexBox yerine bunu kullanacak. Ayrıca, cascad'ı kucakladığımız için, özellik sorgularını anlamayan tarayıcılar onları görmezden gelecek ve ihtiyaç duydukları bilgiye sahip olacak. Stillerimizi normalden biraz daha fazla yazdığımızı planlamamız gerekebilir, ancak bunu yaparak mantıklı geri dönüşlerle harika görünümlü düzenler oluşturabiliriz. Eski sayfalarınızı kaydetmek istiyorsanız, onları PDF olarak dışa aktarın ve bunları kaydedin. Bulut depolama .

Ayrıca, zaman geçtikçe, yalnızca CSS ızgarası için daha fazla destek olacaktır. Sadece ne kadar büyük olacağını düşünün Fallback'lerimizi silmek ve tüm ızgara ile ilgili tüm CSS'yi bırakın. Izgara hakkında daha fazla bilgi edinirken, şu anda çok daha az CSS hattıyla yaptığımız birçok şeyi yaptığını fark edeceksiniz. Unutmayın, özellikle karmaşık bir siteniz varsa, ağ sağlayıcısı Servis çizilmeye kadar olmalıdır.

Bu makale başlangıçta ortaya çıktı net dergisi , dünyanın önde gelen dergisi geliştiriciler ve web tasarımcıları için. Abone olun .

Daha fazla oku:

CSS ızgara düzeni sırları ortaya çıktı
İş akışınızı hızlandırmak için 30 Web Tasarım Araçları
CSS Gridli Moda Esnek Düzenler

CSS ızgarası ile duyarlı bir düzen oluşturun

01. İşaretlemeni ayarla

02. Temel stilleri yazın

03. Izgaranı kur

04. Büyük tarayıcı uyumluluğu ayarlayın

05. Stil Bireysel Öğeler

06. Eşyaları ızgaraya yerleştirin

Eski tarayıcılar hakkında hızlı bir yana

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

CSS'inizi optimize etmenin ve sitenizi hızlandırmanın 21 yolu

Resimlerinde ölçek nasıl elde edilir

Boyama için Mahlstick nasıl yapılır ve kullanabilirsiniz

Esnek bir atlıkarınca bileşeni oluşturun

Photoshop'ta stil çerçeveleri oluşturun

Ölçeklenebilir duyarlı bileşenler oluşturun

Güzel bir suluboya manzara boyama nasıl oluşturulur

Web için basit resimler oluşturun

Kategoriler