Grid düzenlerini görsel olarak kurun; duyarlı auto-fit kolonlar dahil.
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, minmax(60px, auto)); gap: 16px 16px;
Eşit izler, birbirinin aynı kolonlardan oluşan basit bir tekrar verir. Özel izler ise şablonu kendiniz yazmanızı sağlar; fr birimi, sabit piksel ve auto'yu karıştırabilirsiniz.
auto-fit'i açıp en küçük kolon genişliğini belirleyin. Grid, o genişliği tutabilecek kadar kolonu sığdırır ve kalanı alta alır; hiç medya sorgusu gerekmez.
Kolon ve satır boşlukları ayrıdır, çünkü çoğu zaman farklı değerler ister. Önizleme gerçek bir grid kabıdır, yani CSS tam olarak gördüğünüzü üretir.
Sabit izler ve boşluklar düşüldükten sonra kalan boş alanın bir payı. Üç adet 1fr kolon kalan genişliği eşit böler, 1fr 2fr 1fr ise ortadakine iki kat pay verir.
İkisi de en küçük değeri tutabilecek kadar iz sığdırır. İzden az öge varsa auto-fit boş olanları çökertir ve ögeler genişler, auto-fill ise onları yerinde bırakır.
auto-fit ve minmax ile repeat kullanın; buradaki duyarlı anahtarın ürettiği tam olarak budur. Tarayıcı en küçük genişliği tutabilecek kadar kolon sığdırır ve otomatik alta geçer.
Satır ve kolonun ikisi de önemliyse grid: sayfa düzeni, gösterge paneli ya da galeri. Araç çubuğu veya etiket sırası gibi tek yönlü işler için flexbox.
Bir ize taban ve tavan koyar. minmax(180px, 1fr), asla 180 pikselden dar olma ama yer varsa boş alanı paylaşacak kadar büyü demektir.
Evet, ögede grid-column ve grid-row ile; ancak bu kap özelliği değil öge bazlı yerleşimdir. Bu araç kabı kurar, yerleşim kurallarını siz eklersiniz.
Evet. grid-gap eski adıydı ve yerini gap aldı. Tüm güncel tarayıcılar gap'i desteklediği için önekli sürümü kullanmak için bir sebep yok.
Evet, tamamen ücretsiz ve üyeliksiz.
Her flexbox özelliği canlı önizlemeyle, CSS ve Tailwind çıktısıyla birlikte.
Aracı AçKöşeleri görsel olarak yuvarlayın; organik blob şekilleri üreten eğik çizgi sözdizimi dahil.
Aracı AçCSS'i küçültün veya düzenleyin; string ve data URI'ler bozulmadan, ne kadar küçüldüğünü görerek.
Aracı Aç