Softonic

CSS Grid Oluşturucu

Adım 1 / 3
Sonraki

CSS Grid, 2B düzenler kurmanın standart yoludur ama kapsayıcı söz dizimini unutmak kolaydır. Bu oluşturucu kapsayıcı kurallarını sizin için yazar: sabit sayıda eşit genişlikte sütun, izler arasındaki boşluk ve minimum genişliğin altında auto-fit sütunlarına geçen bir medya sorgusu. Böylece düzen küçük ekranlarda da okunabilir kalır. Çıktı yalnızca kapsayıcı CSS’idir; öğeleri yerleştirme işi kendi stil sayfanızda kalır.

Izgara nasıl oluşturulur

  1. 1

    Sütun sayısını ayarlayın

    1 ile 12 arasında eşit genişlikte iz.

  2. 2

    Minimum sütun genişliğini ayarlayın

    Bu genişliğin altında ızgara auto-fit moduna geçer, böylece her sütun kullanılabilir bir minimum boyutu korur.

  3. 3

    Boşluğu ayarlayın

    Sütunlar ve satırlar arasındaki boşluk.

  4. 4

    CSS oluşturun

    Araç, kapsayıcı kurallarını ve duyarlı alternatifi yazar.

  5. 5

    Kodu kopyalayın

    Kapsayıcı kurallarını stil sayfanıza yapıştırın ve öğeleri kendi `grid-column` / `grid-row` kurallarınızla yerleştirin.

Oluşturulan kapsayıcı

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;

@media (max-width: 660px) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
  • repeat(3, minmax(0, 1fr)): mevcut genişliği eşit paylaşan üç sütun. 1fr, kalan alanın bir parçasıdır; minmax(0, 1fr) sütunların içerik boyutunun altına inmesine izin verir.
  • gap: her iz arasındaki boşluk.
  • Medya sorgusu repeat(auto-fit, minmax(220px, 1fr)) moduna geçer; yani her biri en az 220px genişliğinde, sığabilecek kadar sütun oluşturulur. Kırılma noktası, sütun sayısının minimum genişlikle çarpımıdır (120px tabanıyla), böylece küçük ekranlarda ızgara sıkışmak yerine yeni satırlara geçer.

fr birimi

fr, “kalan alanın bir parçası” anlamına gelir: sabit boyutlu izler çıkarıldıktan sonra kalan alan, toplam fr birimi sayısına bölünür.

grid-template-columns: 200px 1fr 2fr;

1000px’lik bir kapsayıcıda ilk sütun 200px alır, kalan 800px 1:2 oranında bölünür, yani 267px ve 533px.

auto-fill ile auto-fit

  • auto-fill: yeterli öğe olmadığında boş doldurma izleri oluşturur.
  • auto-fit: boş izleri sıfıra daraltır, böylece kalan öğeler satırı doldurmak için esner.

Duyarlı alternatif, kart ızgaralarının istediği auto-fit yöntemini kullanır: satır her zaman dolu görünür.

Farklı genişlikte sütunlar

Oluşturucu eşit sütunlar üretir. Boyutları karıştırmak için çıktıyı düzenleyin: grid-template-columns: 200px 1fr 2fr; sabit bir kenar çubuğu ve 1:2 oranında iki esnek sütun verir. Adlandırılmış alanlar (grid-template-areas) veya açık yerleştirme (grid-column: 1 / 3) için bu kuralları oluşturulan kapsayıcının üzerine elle ekleyin.

Grid ve Flexbox

  • Grid: izlerle açık 2B düzen. Düzenin satır ve sütun yapısı olduğunda iyidir (sayfa iskeleti, galeri, panel).
  • Flexbox: tek bir eksen boyunca 1B hizalama. Öğeler doğal akış içindeyken iyidir (gezinme çubuğu, buton satırı).

Gerçek düzenler genellikle ikisini birleştirir: sayfa iskeleti için Grid, bileşenlerin içinde Flexbox.

Sık yapılan hatalar

  • Alt öğelerde min-width: 0 unutmak: ızgara öğeleri varsayılan olarak içeriklerinin minimum genişliğini kullanır ve bu, fr sütunlarının en uzun kelimenin altına inmesini engeller. Alt öğelere min-width: 0 vererek daralmalarını sağlayın.
  • display: grid olmadan iç içe geçmek: bir ızgara alt öğesi, siz bildirmediğiniz sürece kendisi bir ızgara değildir.

Sık Sorulan Sorular

Düzeni küçük ekranlarda korur. Oluşturulan medya sorgusu repeat(auto-fit, minmax(genişlik, 1fr)) moduna geçer, böylece her sütun en az o genişliği korur ve ızgara sütunları sıkıştırmak yerine daha fazla satır oluşturur.

Oluşturucu eşit sütunlar üretir. Boyutları karıştırmak için çıktıdaki grid-template-columns satırını düzenleyin; örneğin geniş bir orta sütun için 1fr 2fr 1fr veya sabit bir kenar çubuğu için 200px 1fr.

Genellikle öğenin, içeriğinin minimum genişliğine eşit olan varsayılan min-width: auto değerine sahip olması yüzünden. Izgara öğesine min-width: 0 vererek hücresinin içinde daralmasını sağlayın.

Düzenin satır ve sütun yapısı varsa Grid (sayfa düzeni, fotoğraf galerisi, panel). Öğeler tek bir eksen boyunca akıyorsa Flexbox (gezinme çubuğu, buton satırı, form alanları yığını).

İlgili Araçlar

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Webpack Yapılandırma Oluşturucu

Kısa bir formdan webpack 5 için bir webpack.config.js oluşturun: entry, çıkış klasörü ve modu ayarlayın; ardından TypeScript, Babel, bir CSS yükleyici, HtmlWebpackPlugin ve bir dev sunucu açın.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

Telefon numarası doğrulayıcı

Telefon numarasının ülkeye göre yapısını denetleyin; bölge, tür, E.164, uluslararası, ulusal ve RFC 3966 biçimlerini görün.

Kurgusal telefon numarası oluşturucu

Beş ülkede resmen ayrılmış aralıklardan 50 adede kadar kurgusal numara üretin.

Rastgele adres oluşturucu

Arayüz maketleri ve testler için üç basitleştirilmiş biçimde 1–20 adres benzeri kayıt oluşturun.

Araç diğer dillerde mevcuttur