Verimli Düzenler için Flexbox ve CSS Izgaralarını Nasıl Birleştirirsiniz?

Editörün notu: Bu konuk gönderisi, kod üretme sanatını seven bir UX yazılım mühendisi ve web tasarımcısı olan Abbey Fitzgerald tarafından yazılmıştır.

Geçmişte, CSS kayan özellikleri bir web sitesindeki öğeleri düzenlemek için ana yöntemlerden biriydi. Ve daha önce bu şekilde çalıştıysanız, bunun karmaşık düzenler için her zaman ideal olmadığını bilirsiniz. Şans eseri, modern web tasarımı çağında, Flexbox ve CSS Izgaraları sayesinde öğeleri hizalamak çok daha kolay hale geldi.

Flexbox ortaya çıktığında, hizalamayı çok daha kolay hale getirdi ve o zamandan beri geniş çapta benimsendi. CSS Izgara Düzenleri, web tasarım topluluğunda da büyük bir heyecan yarattı. Bir süre önce, temel bir CSS Izgara Düzeninin nasıl oluşturulacağına bir göz atmıştık. Yaygın olarak benimsenmemesine rağmen, tarayıcılar onu desteklemeye başlıyor. Tam olarak desteklendiğinde bunun tasarımlar üzerinde büyük etkisi olacaktır. Tarayıcı desteği sürekli artıyor; En güncel bilgiler için Kullanabilir miyim bölümüne göz atmayı unutmayın.

Şimdi sırada ne olduğunu merak ediyor olabilirsiniz; sonuçta, Flexbox ve CSS Grid Layouts benzer sonuçlar veriyor gibi görünüyor. Bununla birlikte, bu bir Flexbox'a karşı Grid tartışması değil, daha çok bunları birlikte nasıl kullanacağınızı öğrenmek. Hem Grid hem de Flexbox ile oynadıkça, birini veya diğerini seçmek zorunda olmadığınızı gördüm. Yakın gelecekte, CSS Grid Layouts tam tarayıcı desteğine sahip olduğunda, tasarımcılar her birinin birleşik avantajlarından yararlanabilecek ve en verimli ve ilginç tasarımları yaratabilecektir.

Temel Flexbox ve CSS Izgara Düzenlerini Test Etme

Geliştirme iş akışınız için Flexbox veya CSS Grid'in daha iyi çalışıp çalışmadığını belirlemek amacıyla, yalnızca birini veya diğerini kullanan standart bir düzen oluşturmak, nasıl çalıştıklarını ve birinin diğerine göre avantajları olup olmadığını görmenin iyi bir yoludur. Başlık, kenar çubuğu, ana içerik ve alt bilgi içeren çok basit ve çok tanıdık bir düzen türüyle başlayacağız. Bunun gibi basit bir düzen, çeşitli öğeleri konumlandırmanın hızlı bir yoludur.

Ve unutmayın, canlı sitenizde asla değişiklik yapmamalısınız. Bunun yerine, ücretsiz bir yerel WordPress geliştirme uygulaması olan Local ile denemeler yapmayı deneyin. Bugün indirin!

Flexbox ile Düzen Nasıl Oluşturulur

Son zamanlarda, bir Flexbox kart düzeni oluşturma konusunu ele aldım. Bu gönderi, Flexbox'ın belirli CSS bilgileriyle birlikte nasıl çalıştığı hakkında ayrıntılı bilgi verir; bu nedenle, Flexbox'a yeni başlayan biriyseniz, nasıl çalıştığına aşina olmanıza yardımcı olacaktır.

Bu eğitim için, işte inşa edeceğimiz şey:

Bunu Codepen'de görün.

Bu temel düzen için ana Flexbox görevleri şunları içerir:

• Tam genişlikte üstbilgi ve altbilgi oluşturun
• Kenar çubuğunu ana içerik alanının yanına yerleştirin
• Kenar çubuğunun ve ana içerik alanının doğru boyutlandırılması
• Navigasyon öğeleri konumlandırma

Temel HTML yapısı

 <div sınıfı="kapsayıcı">
        
    <başlık>
        <nav>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <düğme></düğme>
    </başlık>
    <div sınıfı="sarmalayıcı">
        <aside class="kenar çubuğu">
            <h3></h3>
        </kenar>
        <bölüm sınıfı="ana">
            <h2></h2>
            <p></p>
        </bölüm>
    </div><!-- /sarmalayıcı -->
    <altbilgi>
        <h3></h3>
        <p></p>
    </footer>
</div><! -- /konteyner -->

esnek ekran nasıl kullanılır

Başlık stili

Dışarıdan başlayıp içeride çalışarak display: flex; herhangi bir Flexbox düzeninde ilk adımdır. Esnek yön sütun olarak ayarlanmıştır, bu nedenle bu, tüm bölümleri birbirinin altına yerleştirecektir.

 .konteyner {
    ekran: esnek;
    esnek yön: sütun;
}

Tam genişlikte bir başlık oluşturmak display: flex; (başlıklar varsayılan olarak bir blok düzeyinde öğedir). Bu bildirim sayesinde, gezinme öğelerinin kolayca yerleştirilmesine olanak sağlayacaktır.

Soldaki navigasyonda bir logo ve iki menü öğesi, sağda ise oturum açma düğmesi vardır. Gezinti üstbilgidedir, yani justify-content: space-between; gezinme ve düğme arasında otomatik olarak boşluk bırakılacaktır.

Kullanışlı bir şey, metni hizalamanın ne kadar kolay olduğudur. Gezinmede, align-items: baseline; , tüm gezinme öğeleri metnin taban çizgisine hizalanır, böylece daha düzgün görünürler.

 başlık {
    dolgu: 15 piksel;
    kenar boşluğu: 40px;
    ekran: esnek;
    haklı-içerik: boşluk-arasında;
}
başlık gezintisi {
    ekran: esnek;
    hizalama öğeleri: taban çizgisi;
    liste stili türü: yok;
}

Sayfa içeriği stili

Ardından, ikisini içeren bir sarmalayıcı ile kenar çubuğu ve ana içerik alanları var. .wrapper sınıfına sahip div de şu display: flex; ancak esnek yön yukarıdakinden farklıdır. Kenar çubuğu ve içerik alanları yığın yerine yan yana olduğundan, esnek yön

Ardından, ikisini içeren bir sarmalayıcı ile kenar çubuğu ve ana içerik alanları var. .wrapper sınıfına sahip div de şu ekrana ihtiyaç duyar: flex; ancak esnek yön yukarıdakinden farklıdır. Kenar çubuğu ve içerik alanları yığın yerine yan yana olduğundan, esnek yön satırdır ve yukarıdaki kapsayıcıda yapılanın tersidir.

 .sarma {
    ekran: esnek;
    esnek yön: sıra;
} 

Ana bölümün ve kenar çubuğunun boyutu çok önemlidir, çünkü burada daha belirgin bilgiler yaşar. Ana içerik, Flexbox ile oldukça kolay olan kenar çubuğunun boyutunun üç katı olmalıdır.

 .ana {
    esnek: 3;
    sağ kenar boşluğu: 60 piksel;
}
.kenar çubuğu {
   esnek: 1;
}

Bu kod parçacığı için steno kullandım. Esnek değerler, esnek büyüme özelliği içindir. Flex-grow güçlüdür çünkü bu, öğelerin aynı kap içindeki diğer esnek öğelere göre ne kadar büyüyeceğidir.

Genel olarak, Flexbox bu basit düzeni oluşturmada oldukça etkiliydi. Liste öğelerinin stili ve gezinme ile düğme arasındaki boşluk üzerinde kontrol sahibi olmak özellikle yardımcı oldu.

CSS Izgara Düzenleri ile Düzen Nasıl Oluşturulur

Verimliliği test etmek için bir sonraki adım, CSS Grid ile aynı temel düzeni oluşturmaktır. Sayfa öğelerinin tümü aynıdır ve Flexbox örneğiyle aynı şekilde konumlandırılacaktır.

Bunu Codepen'de görün.

Izgara Şablon Alanları

CSS Grid ile kullanışlı bir şey, şablon alanlarını belirleme yeteneğidir, bu da yerleşimleri tanımlamayı çok sezgisel hale getirebilir. Bu yaklaşımı benimseyerek, ızgara üzerindeki alanlar adlandırılabilir ve konum öğelerine atıfta bulunulabilir. Bu temel düzen için adlandırmamız gereken dört öğe vardır:

• başlık
• ana içerik
• kenar çubuğu
• alt bilgi

Temel HTML Yapısı

 <div sınıfı="kapsayıcı">
        
    <başlık>
        <nav>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <düğme></düğme>
    </başlık>
  
    <aside class="kenar çubuğu">
        <h3></h3>
        <ul>
            <li></li>
        	<li></li>
	<li></li>
	<li></li>
	<li></li>
          </ul>
    </kenar>
    <bölüm sınıfı="ana">
        <h2></h2>
        <p></p>
         <p> </p>
  </bölüm>
    <altbilgi>
        <h3></h3>
        <p></p>
    </footer>
</div>

Bu alanları ızgara kapsayıcımızda sırayla, onları çizer gibi tanımlayacağız. Ayrıca okunabilirlik için aralarında boşluk bırakacağım.

 grid-şablon-alanları:
        "başlık başlığı"
        "kenar çubuğu ana"
        "alt bilgi alt bilgi";

Kenar çubuğunun ana bölümden önce nasıl listelendiğine dikkat edin? Bunları değiştirmek, sayfadaki sıranın da değişmesini sağlar. Şu anda kenar çubuğu solda ve ana içerik sağda, ancak gerekirse kolayca değiştirebilirsiniz.

Unutulmaması gereken bir şey: Bu adların stile "bağlı" olması gerekir. Grid-şablon-alanları bildirildiği için, başlığın gerçekte nereye ait olduğunu bilmiyoruz. Başlık bloğunda, grid-area: header; eklenmesi gerekiyor.

 başlık {
    ızgara alanı: başlık;
    dolgu: 20 piksel 0;
    ekran: ızgara;
    ızgara şablonu sütunları: 1fr 1fr;
}

HTML yapısı, Flexbox örneğindeki ile aynıdır, ancak ızgara düzenini oluşturmak için CSS oldukça farklıdır.

 .konteyner{
    maksimum genişlik: 900 piksel;
    arka plan rengi: #fff;
    kenar boşluğu: 0 otomatik;
    dolgu: 0 60 piksel;
    ekran: ızgara;
    ızgara şablonu sütunları: 1fr 3fr;
    grid-şablon-alanları:
        "başlık başlığı"
        "kenar çubuğu ana"
        "alt bilgi alt bilgi";
    ızgara aralığı: 50px;
}

Bir CSS Izgara Düzeni ile çalışmaya başlamak için display: grid; konteyner üzerine ayarlayın. Izgara-şablon-sütunları, sayfanın genel yapısını vermek için burada bildirilir. Flexbox örneğinde .main sınıfının flex-grow değerine 3 olarak ayarlandığını ve boyutlandırmayı oluşturmak için kenar çubuğunun flex-grow değerine 1 sahip olduğunu hatırlıyor musunuz? Burada grid-şablon-sütunları 1fr ve 3fr olarak ayarlanmıştır. Burası ızgaranın kesirli birimlerle şekillendiği yerdir. Bu değerlerden iki sütun olduğu ve eşit genişlikte olmadığı anlaşılır. 3fr olarak ayarlanan sütun diğerinden üç kat daha geniştir. Bu, kenar çubuğunun içerik alanından nasıl daha dar göründüğünü açıklar.

Ardından, kap için kullanılan fr birimlerinin başlık için ayarlanması gerekir. Izgara şablonu sütunları 1fr ve 1fr olarak ayarlandı. Bu şekilde iki eşit boyutlu sütun vardır ve gezinme öğeleri ve düğmesi sığar.

 başlık {
    ızgara alanı: başlık;
    ekran: ızgara;
    ızgara şablonu sütunları: 1fr 1fr;
} 

Düğmeyi yerleştirmek için, sadece justify-self'i kullanmamız ve onu sona ayarlamamız gerekiyor.

 başlık düğmesi {
    kendini haklı çıkar: son;
}

Navigasyon, olması gereken yere yerleştirilir:

 başlık gezinme {
    kendini haklı çıkar: başlat;
}

Tam genişlikte altbilgi, içerik ortada olduğundan farklı sütunların ayarlanmasına ihtiyaç duymaz.

Hem Flexbox hem de CSS Izgaralarıyla Düzen Nasıl Oluşturulur

Artık her yöntemin ayrı ayrı neler yapabileceğini gördüğümüze göre, Flexbox ve CSS Grid Layouts'u birleştirerek daha karmaşık bir şey yaratmanın zamanı geldi.

Bunu Codepen'de görün.

Izgarayı çalıştırmanın temel taslağı şöyledir:

Bunu Codepen'de görün.

Tasarımın hem sütunlara hem de satırlara nasıl dayandığını fark ettiniz mi? Bu düzen, öğelerin her iki yönde de tutarlı bir şekilde sıralanmasını ve davranmasını gerektirir, bu nedenle CSS Izgarasını kullanmak, genel düzen için verimlidir.

Planlama, böyle bir düzende anahtardır. İlk önce onu çizmek ve kelimenin tam anlamıyla işlerin nasıl biriktiğini görmek iyi bir fikirdir. Kodu başlatmak için ekrana sahip olmak: grid; gereklidir; onsuz, bu tür bir düzeni kullanmak işe yaramaz. Burada dikkat edilmesi gereken bir nokta, içerik blokları arasında boşluk olmasıdır. Bu, grid-column-gap ve grid-row-gap ile sağlandı.

 .konteyner {
  ekran: ızgara;
  ızgara şablonu sütunları: 0.4fr 0.3fr 0.3fr;
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

Kesirli birimler bu düzen için geri döndü ve artık ihtiyaç duyulan üç alan var. 0.4fr'nin ilk değeri, her ikisi de 0.3fr olan ikinci ve üçüncü değerden biraz daha geniştir.

Sütun ve Satır Düzeni

Diyagrama en baştan başvurmanın önemli olduğu yer burasıdır. Üstten başlayarak, başlık bu şekilde yerleştirilir. Tüm sütunları ve bir satırı kapsar.

 .başlık {
  grid-column-start: 1;
  ızgara sütunu sonu: 4;
  grid-row-start: 1;
  ızgara satırı sonu: 2;
  arka plan rengi: #d5c9e2;
}

Stenografi kullanmak isterseniz, başlangıç ​​ve bitiş değerleri aynı satırda ve eğik çizgi ile ayrılmış olmalıdır. Şöyle görünecek:

 .başlık {
  ızgara sütunu: 1 / 4;
  ızgara satırı: 1 / 2;
  arka plan rengi: #55d4eb;
}

Diğer tüm öğeleri yerleştirmek için uygun ızgara ve sütun değerlerinin CSS'ye eklenmesi yeterlidir. Bunları burada tek tek incelemek yerine, bu örnek Codepen'de.

Izgara Düzeni oluşturulduktan sonra, bir sonraki adım içerikte ince ayar yapmaktır.

Navigasyon

Flexbox, başlık öğelerini yerleştirmek için mükemmeldir. Temel yerleşim örneği, justify-content: space-between ile buna değindi. Izgara örneğinin justify-self: start; gezinme ve kendini haklı çıkarma: son; Düğmenin bir şeyleri yerleştirmesi için, ancak Flexbox gezinme için boşluk bırakmayı kolaylaştırdı.

 .başlık {
  ızgara sütunu: 1 / 4;
  ızgara satırı: 1 / 2;
  renk: #9f9c9c;
  metin dönüşümü: büyük harf;
  alt kenarlık: 2 piksel katı #b0e0ea;
  dolgu: 20 piksel 0;
  ekran: esnek;
  haklı-içerik: boşluk-arasında;
  hizalama öğeleri: merkez;
} 

Aynı format burada izlenecektir. Logo, menü öğeleri ve düğme, boşluk için Flexbox'ın yaslama içeriğini kullandı.

Sütun içerik ızgarası

Öğelerin tek yönde sıralanmasını gerektiren durumlarda, yani daha "tek boyutlu"dur, tipik olarak Flexbox daha iyi bir seçenektir. Ayrıca Flexbox, öğeleri dinamik olarak ölçeklendirmede iyidir. Belki bunu bir dizi kutuda display:flex; ekleyerek denediniz. bir üst öğede ve esnek özellikler alt öğelerde. Bu teknikle güzel bir çizgi oluştu ve tüm elemanların aynı yükseklikte olduğundan emin olmanın etkili bir yolu.

Metin ve düğmelerle satır içeriği

“Ekstra içerik” bölümünde yazı ve butonların olduğu üç alan eklendi. Flexbox, ayarlanan genişliği üç sütun için korumayı kolaylaştırır.

 .ekstra {
  ızgara sütunu: 2 / 4;
  ızgara satırı: 4 / 5;
  dolgu: 1rem;
  ekran: esnek;
  esnek sarma: sarma;
  kenarlık: 1px katı #ececec;
  haklı-içerik: boşluk-arasında;
}

Bir Flexbox İstisnası

Evet, Flexbox'ın tek boyutlu düzenler, ızgaralar veya sütunlar için daha iyi olduğunu söyledim, ancak Flexbox'ı modern bir CSS kart tasarımı düzeni oluşturmak için nasıl kullanılır yazısını okursanız, gösterilen bir "son satır" Flexbox hack'i vardı. çift ​​sayıda kart olmasa bile satırları ve sütunları dengede tutmak için.

 .ilgili resimler {
  ızgara sütunu: 1 / 3;
  ızgara satırı: 5 / 6;
  ekran: ızgara;
  grid-template-columns: tekrar(4,1fr);
  ızgara aralığı: 1rem;
}
.ilgili resimler .icon {
    arka plan rengi: beyaz;
    esnek: 1 1 150 piksel;
}

Tasarım Yaklaşımı Özeti

Temel olarak, burada benimsediğim yaklaşım, genel düzen (ve tasarımda doğrusal olmayan herhangi bir şey) için CSS Izgara Düzenini kullanmaktı. Izgara içeriği alanlarında, ızgara alanları içindeki stili düzenlemek ve ince ayar yapmak için Flexbox kullanıldı.

Kaynaklar

Flexbox ve CSS Grid Layouts için söylenemeyecek kadar çok harika kaynak var. İşte size doğru yönde başlamanızı sağlayacak ve mizanpajlarınıza ilham verecek birkaç tanesi.

• Kutu Hizalama Hile Sayfası
• Jen Simmons'ın Yerleşim Laboratuvarı
• Eksiksiz Bir Grid Kılavuzu
• Eksiksiz Flexbox Kılavuzu

Umarız bu alıştırmalar, hem CSS Izgara Yerleşimleri hem de Flexbox ile mizanpajları nasıl oluşturacağınız konusunda size daha iyi bir fikir vermiştir. Bu yeni teknolojiler hakkında ne düşünüyorsunuz? Geliştirme sürecinize nasıl yardımcı oldular?