Verimli düzenler için Flexbox ve CSS ızgaraları nasıl birleştirilir

Geçmişte, CSS kayan nokta özellikleri, bir web sitesindeki öğeleri düzenlemek için ana yöntemlerden biriydi. Ve daha önce bu şekilde çalıştıysanız, karmaşık düzenler için her zaman ideal olmadığını bilirsiniz. Neyse ki, web tasarımının modern çağında, Flexbox ve CSS ızgaraları 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 çok fazla 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 benimsenmese de, tarayıcılar bunun için destek almaya başlıyor. Tam olarak desteklendiğinde bunun tasarımlara etkisi büyük olacaktır. Tarayıcı desteği sürekli artıyor; En güncel bilgiler için Can I Use'ı kontrol ettiğinizden emin olun.

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

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 için, yalnızca birini veya diğerini kullanan standart bir düzen oluşturmak, bunların nasıl çalıştığı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 denemeyi deneyin. Bugün indirin!

Flexbox ile bir düzen nasıl oluşturulur

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

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

Bunu Codepen'de görün.

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

• Tam genişlikte üst bilgi ve alt bilgi 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ı
• Gezinme öğeleri konumlandırma

Temel HTML yapısı

<div class="container">
        
    <header>
        <nav>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <button></button>
    </header>

    <div class="wrapper">
        <aside class="sidebar">
            <h3></h3>
        </aside>
        <section class="main">
            <h2></h2>
            <p></p>
        </section>
    </div><!-- /wrapper -->

    <footer>
        <h3></h3>
        <p></p>
    </footer>
</div><! -- /container -->

esnek ekran nasıl kullanılır

Başlık stili

Dışarıdan başlayarak ve içeride çalışarak display: flex; kapsayıcı, herhangi bir Flexbox düzenindeki 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.

.container {
    display: flex;
    flex-direction: column;
}

Tam genişlikte bir başlık oluşturmak, display: flex; (başlıklar varsayılan olarak blok düzeyinde bir öğedir). Bu bildirim nedeniyle, navigasyon öğelerinin kolay yerleştirilmesine izin verecektir.

Soldaki navigasyonda bir logo ve sağda bir oturum açma düğmesi bulunan iki menü öğesi vardır. Gezinme, başlıktadır, bu nedenle, justify-content: space-between; navigasyon ve düğme otomatik olarak aralıklı olacaktır.

Kullanışlı bir şey, metni hizalamanın ne kadar kolay olduğudur. Navigasyonda, align-items: baseline; , tüm gezinme öğeleri, daha tekdüze görünmeleri için metnin taban çizgisine hizalanır.

header{
    padding: 15px;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
}

header nav ul {
    display: flex;
    align-items: baseline;
    list-style-type: none;
}

Sayfa içeriği stili

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

Ardından, ikisini içeren bir sarmalayıcı içeren kenar çubuğu ve ana içerik alanları vardır. .wrapper sınıfına sahip div'in de ekrana ihtiyacı vardır: flex; ancak esnek yön yukarıdakinden farklıdır. Kenar çubuğu ve içerik alanları yığılmak yerine yan yana olduğundan, esnek yön, yukarıdaki kapta yapılanın tersi olan satırdır.

.wrapper {
    display: flex;
    flex-direction: row;
}

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

.main {
    flex: 3;
    margin-right: 60px;
}

.sidebar {
   flex: 1;
}

Bu kod parçacığı için stenografi kullandım. Esnek değerler, esnek büyüme özelliği içindir. Flex-grow güçlüdür çünkü bu, aynı kap içindeki diğer esnek öğelere göre öğe(ler)in 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 bir 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ğindekiyle aynı şekilde konumlandırılacaktır.

Bunu Codepen'de görün.

Izgara şablonu alanları

CSS Grid'in kullanışlı bir özelliği, şablon alanlarını belirleme yeteneğidir; bu, yerleşimleri çok sezgisel hale getirebilir. Bu yaklaşımı benimseyerek, ızgaradaki alanlar adlandırılabilir ve konum öğelerine atıfta bulunulabilir. Bu temel düzen için adlandırmamız gereken dört öğe var:

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

Temel HTML yapısı

<div class="container">
        
    <header>
        <nav>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <button></button>
    </header>
  
    <aside class="sidebar">
        <h3></h3>
        <ul>
            <li></li>
        	<li></li>
	<li></li>
	<li></li>
	<li></li>
          </ul>
    </aside>

    <section class="main">
        <h2></h2>
        <p></p>
         <p> </p>
  </section>

    <footer>
        <h3></h3>
        <p></p>
    </footer>

</div>

Bu alanları grid konteynerimizde sırayla tanımlayacağız, bir nevi onları çizer gibi. Ayrıca onları okunabilirlik için ayıracağım.

grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";

Kenar çubuğunun main'den önce nasıl listelendiğine dikkat edin? Bunları değiştirmek, sayfadaki sıralamayı da değiştirir. Şu anda kenar çubuğu solda ve ana içerik sağda, ancak gerekirse bunu kolayca değiştirebilirsiniz.

Unutulmaması gereken bir şey: Bu isimlerin stile “bağlı” olması gerekir. Sadece grid-template-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.

header{
    grid-area: header;
    padding: 20px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

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

.container{
    max-width: 900px;
    background-color: #fff;
    margin: 0 auto;
    padding: 0 60px;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    grid-gap: 50px;
}

Bir CSS Izgara Düzeni ile çalışmaya başlamak için display: grid; konteyner üzerine yerleştirin. Kılavuz şablon sütunları, sayfanın genel yapısını vermek için burada bildirilir. Flexbox örneğinde, boyutlandırmayı oluşturmak için .main sınıfının esnek büyümenin 3'e nasıl ayarlandığını ve kenar çubuğunun esnek büyümesinin 1 olduğunu hatırlıyor musunuz? Burada ızgara şablonu sütunları 1fr ve 3fr olarak ayarlanmıştır. Bu, ızgaranın kesirli birimlerle şekillendiği yerdir. Bu değerlerle, iki sütun olduğu ve bunların eşit genişlikte olmadığı açıktı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ığacaktır.

header{
    grid-area: header;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

Düğmeyi yerleştirmek için justify-self kullanmamız ve onu sona erdirmemiz yeterli.

header button {
    justify-self: end;
}

Navigasyon olması gereken yere yerleştirilir:

header nav {
    justify-self: start;
}

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

Hem Flexbox hem de CSS Izgaraları ile nasıl düzen oluşturulur?

Artık her yöntemin ayrı ayrı neler yapabileceğini gördük, Flexbox ve CSS Izgara Düzenlerini birleştirerek daha karmaşık bir şey yaratmanın zamanı geldi.

Bunu Codepen'de görün.

Izgarayı çalıştırmanın temel anahattı:

Bunu Codepen'de görün.

Tasarımın hem sütunlara hem de satırlara nasıl dayandığına dikkat edin? Bu düzen, her iki yönde de tutarlı bir şekilde sıralanacak ve davranacak şeylere ihtiyaç duyar, bu nedenle CSS Izgarasını kullanmak, genel düzen için etkilidir.

Böyle bir düzende planlama çok önemlidir. İlk önce onu çizmek ve işlerin kelimenin tam anlamıyla nasıl yığıldığını görmek iyi bir fikirdir. Kodu başlatmak için ekrana sahip olmak: grid; gereklidir; onsuz, bu tür bir düzen kullanmak işe yaramaz. Burada dikkat edilmesi gereken bir nokta, içerik blokları arasında boşluk olmasıdır. Bu, ızgara-sütun-boşluğu ve ızgara-sıra-boşluğu ile sağlandı.

.container {
  display: grid;
  grid-template-columns: 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 şimdi üç alana ihtiyaç 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şından referans vermenin ö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.

.header {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: #d5c9e2;
}

Steno kullanmak istiyorsanız, başlangıç ​​ve bitiş değerleri aynı satırdadır ve eğik çizgi ile ayrılır. Şuna benzer:

.header {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  background-color: #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, sonraki adım içeriğin ince ayarını yapmaktır.

Navigasyon

Flexbox, başlık öğelerini yerleştirmek için mükemmeldir. Temel düzen örneği buna justify-content ile değindi: boşluk-arasında. grid örneğinin justify-self'e sahip olması gerekiyordu: start; navigasyon ve kendini haklı çıkar: bitiş; ama Flexbox gezinme için boşlukları kolaylaştırdı.

.header {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  color: #9f9c9c;
  text-transform: uppercase;
  border-bottom: 2px solid #b0e0ea;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

Sütun içeriği ızgarası

Öğelerin bir yönde sıralanmasını gerektiren, yani daha "tek boyutlu" olduğu durumlar için, genellikle Flexbox daha iyi bir seçenektir. Ayrıca Flexbox, öğeleri dinamik olarak ölçeklendirmede iyidir. Belki bunu bir dizi kutuda display:flex; ekleyerek denemişsinizdir. bir üst öğede ve alt öğelerde esnek özellikler. Bu teknikle güzel bir çizgi oluşur ve bu, tüm öğelerin aynı yükseklikte olmasını sağlamanın etkili bir yoludur.

Metin ve düğmeler içeren satır içeriği

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

.extra {
  grid-column: 2 / 4;
  grid-row: 4 / 5;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ececec;
  justify-content: space-between;
}

Bir Flexbox istisnası

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

.related-images {
  grid-column: 1 / 3;
  grid-row: 5 / 6;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-gap: 1rem;
}

.related-images .icon {
    background-color: white;
    flex: 1 1 150px;
}

Tasarım yaklaşımı özeti

Temelde burada benim yaklaşımı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 sıralamak ve ince ayar yapmak için Flexbox kullanıldı.

Kaynaklar

Flexbox ve CSS Grid Layouts için çok fazla harika kaynak var ve bahsetmeye gerek yok. İş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 Düzen Laboratuvarı
• Tam Bir Kılavuz Kılavuzu
• Flexbox için Eksiksiz Bir Kılavuz

Umarım bu alıştırmalar, hem CSS Izgara Düzenleri hem de Flexbox ile mizanpajların nasıl oluşturulacağı 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?

WordPress eklentileri geliştiricileri sever

Site geliştirmeyi hızlandıran mükemmel WordPress eklentisini bulmak, bir dizi koddaki tek bir yazım hatasını bulmaya çalışmak gibidir – biraz zaman alabilir. Ve bu günlerde, farklı görevler için o kadar çok eklenti var ki, bir sitenin tam olarak hangi işlevselliğe ihtiyaç duyduğunu (veya gerekmediğini) ve hangi eklentilerin bunu verimli bir şekilde sağladığını belirlemek zor olabilir.

Geliştiriciler için en çok önerilen eklentilerimizin bir listesi için bu e-kitabı indirin! Tüm bu eklentilerin kullanımının basit olduğunu, sitenizde çok fazla performans gerektirmediğini ve tamamen güvenilir olduğunu gördük.

Yeni favori eklentinizi yüklemeye hazır mısınız? Hadi dalalım!

Bu makaleyi beğendiyseniz, bunlarla ilgili başka bir beceri öğrenmelisiniz:

• Portföyünüz için tasarımın animasyonlu ekran görüntüleri nasıl yapılır?
• CSS ile SVG animasyonları nasıl oluşturulur
• WordPress sitenizi mobil kullanılabilirlik sorunları için nasıl test edebilirsiniz?
• WordPress video galerisi nasıl oluşturulur