CSS Podcast'i - 011: Tablo
'nı inceleyin.
Web tasarımında gerçekten yaygın olarak kullanılan bir düzen üstbilgi, kenar çubuğu, gövde ve altbilgi düzenidir.
Yıllar içinde, bu düzeni çözmenin pek çok yöntemi oldu. CSS ızgarasında ise nispeten basit olmasının yanı sıra, ama birçok seçeneğiniz var. Izgara, kontrol ve kontrol tuşlarının birleştirilmesinde son derece yararlıdır. dışsal boyutlandırmanın içsel boyutlandırma esnekliğini sağladığını, Bu nedenle bu tür bir düzen için ideal. Bunun nedeni, ızgaranın iki boyutlu içerik için tasarlanmış bir düzen yöntemi olmasıdır. Yani, öğeleri aynı anda satırlar ve sütunlar halinde düzenleme.
Izgara düzeni oluştururken satır ve sütunlardan oluşan bir ızgara tanımlarsınız. Daha sonra öğeleri bu ızgaraya yerleştirirsiniz. veya tarayıcının bu hücreleri, oluşturduğunuz hücrelere otomatik olarak yerleştirmesine izin verin. Dilediğiniz her şey Ancak genel olarak nelerin izlendiğine dair ızgara düzenini hemen oluşturacaksınız.
Genel Bakış
Peki, ızgara özelliğiyle neler yapabilirsiniz? Izgara düzenleri aşağıdaki özelliklere sahiptir. Bu kılavuzda tüm bu etmenler hakkında bilgi edineceksiniz.
- Bir ızgara, satır ve sütunlarla tanımlanabilir. Bu satır ve sütun kanallarının nasıl boyutlandırılacağını seçebilirsiniz veya içeriğin boyutuna tepki verebilirler.
- Izgara kapsayıcısının doğrudan alt öğeleri bu ızgaraya otomatik olarak yerleştirilir.
- Alternatif olarak, öğeleri tam olarak istediğiniz konuma yerleştirebilirsiniz.
- Izgaradaki çizgiler ve alanlar, yerleşimi kolaylaştırmak için adlandırılabilir.
- Izgara kapsayıcısındaki boşluk, kanallar arasında dağıtılabilir.
- Izgara öğeleri, kendi alanları içinde hizalanabilir.
Izgara terminolojisi
CSS ilk kez gerçek bir düzen sistemine sahip olduğu için ızgarada yeni terminoloji var.
Kılavuz çizgileri
Izgara çizgilerden oluşur, bir reklam grubudur. Izgaranızda dört sütun varsa son sütundan sonraki sütun dahil olmak üzere beş sütun satırı olur.
Satırlar 1'den başlayarak numaralandırılır. Bileşenin yazma moduna ve komut dosyası yönüne göre numaralandırmayla değiştirin. Bu, 1. sütun satırının İngilizce gibi soldan sağa bir dilde solda olacağı anlamına gelir. ve Arapça gibi sağdan sola okunan bir dilde sağlandığından emin olun.
Izgara yolları
Parkur, iki ızgara çizgisi arasındaki boşluktur. Satır kanalı, iki satır satırı ile iki sütun satırı arasında kalan bir sütun izidir. Izgaramızı oluşturduğumuzda, bu parçalara bir boyut atayarak oluştururuz.
Tablo hücresi
Izgara hücresi, satır ve sütun yollarının kesişimiyle tanımlanan bir ızgaradaki en küçük alandır. Bu tıpkı bir tablo hücresi veya e-tablodaki bir hücreye benzer. Bir ızgara tanımlar ve öğelerin hiçbirini yerleştirmezseniz tanımlanan her tablo hücresine otomatik olarak bir öğe yerleştirilir.
Izgara alanı
Birkaç ızgara hücresi bir arada. Izgara alanları, bir öğenin birden çok kanala yayılmasını sağlayarak oluşturulur.
Boşluklar
Raylar arasındaki oluk veya ara sokak. Boyutlandırma amacıyla bunlar normal bir parça gibi işlev görür. İçeriği boşluk içine yerleştiremezsiniz ancak ızgara öğelerini ilgili boşluğa yerleştirebilirsiniz.
Izgara kapsayıcısı
display: grid
uygulanmış HTML öğesi,
Böylece doğrudan alt öğeler için yeni bir ızgara biçimlendirme bağlamı oluşturur.
.container {
display: grid;
}
Izgara öğesi
Izgara öğesi, ızgara kapsayıcısının doğrudan alt öğesi olan bir öğedir.
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Satırlar ve sütunlar
Temel bir ızgara oluşturmak için üç sütunlu bir ızgara tanımlayabilirsiniz. ve kanallar arasında 10 piksellik bir boşluk bırakın.
.container {
display: grid;
grid-template-columns: 5em 100px 30%;
grid-template-rows: 200px auto;
gap: 10px;
}
Terminoloji bölümünde açıklanan birçok şey bu çizelgede gösterilmektedir. Üç sütunlu kanal içerir. Her parça farklı bir uzunluk birimi kullanır. İki satırdan oluşur. diğerinde otomatik olarak yapılacak. "Otomatik" ayarı parça boyutu olarak kullanıldığında içerik kadar büyük olduğu düşünülebilir. Parçalar varsayılan olarak otomatik boyutlandırılır.
.container
sınıfı olan öğenin alt öğeleri varsa
çizelgeye hemen yerleştirilecektir. Bunun nasıl çalıştığını aşağıdaki demoda görebilirsiniz.
Chrome Geliştirici Araçları'ndaki ızgara yer paylaşımı, ızgaranın çeşitli bölümlerini anlamanıza yardımcı olabilir.
Chrome'da demoyu açın.
Öğeyi, container
kimliğine sahip gri arka planla inceleyin.
DOM'de, .container
öğesinin yanındaki ızgara rozetini seçerek ızgarayı vurgulayın.
Düzen sekmesinde
Izgaranızdaki satır numaralarını görmek için açılır listeden Satır Numaralarını Görüntüle'yi seçin.
İçsel boyutlandırma anahtar kelimeleri
Şu bölümde açıklanan uzunluk ve yüzde boyutlarına ek olarak: boyutlandırma birimleri ızgara kanalı, doğal boyutlandırma anahtar kelimeleri kullanabilir. Bu anahtar kelimeler, Kutu Boyutları spesifikasyonunda tanımlanmıştır ve CSS'de kutuları boyutlandırmak için ek yöntemler ekleyin, zaman çizelgesine yer vermeyin.
min-content
max-content
fit-content()
min-content
anahtar kelime, izleme içeriği taşmadan bir parçayı mümkün olduğunca küçük hale getirir.
Örnek ızgara düzenini, tamamı min-content
boyutunda üç sütun kanalı içerecek şekilde değiştirme
kelime sayısı, parçadaki en uzun kelime kadar dar olacaktır.
max-content
anahtar kelimesi tam tersi etkiye sahiptir.
Parça, tüm içeriğin tek bir uzun ve bölünmemiş dizede gösterilmesine yetecek kadar geniş olur.
Dize sarmalanacağından bu durum taşmalara neden olabilir.
fit-content()
işlevi ilk başta max-content
gibi çalışır.
Bununla birlikte, parça işleve aktardığınız boyuta ulaştığında,
içerik sarmalamaya başlar.
Bu nedenle fit-content(10em)
, 10em'den kısa bir parça oluşturur.
max-content
boyutu 10em'den küçükse
ancak hiçbir zaman 10 em'den büyük olmamalıdır.
Bir sonraki demoda ızgara yollarının boyutlarını değiştirerek farklı yerleşik boyutlandırma anahtar kelimelerini deneyin.
ziyaret edin.fr
birimi
Mevcut uzunluk boyutlarımız, yüzdelerimiz ve ayrıca bu yeni anahtar kelimeler mevcuttur.
Yalnızca ızgara düzeninde kullanılabilen özel bir boyutlandırma yöntemi de vardır.
Bu, fr
birimidir.
ızgara kapsayıcısındaki kullanılabilir alanın payını tanımlayan esnek bir uzunluk.
fr
birimi, flexbox'ta flex: auto
kullanımına benzer şekilde çalışır.
Bu öğeler yerleştirildikten sonra alanı dağıtır.
Dolayısıyla, tümü aynı kullanılabilir alan payını alan üç sütuna sahip olmak için:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Fra birimi kullanılabilir alanı paylaştıkça,
Bu videolar sabit boyutlu boşluklarla veya sabit boyutlu parçalarla birleştirilebilir.
Sabit boyutlu öğeye sahip bir bileşen ve kalan alanı kaplayan ikinci parça için
grid-template-columns: 200px 1fr
adlı parçayı parça listesi olarak kullanabilirsiniz.
fr birimi için farklı değerler kullanıldığında, alan orantılı olarak paylaşılır. Daha büyük değerler daha fazla boş alan sağlar. Aşağıdaki demoda üçüncü kanalın değerini değiştirin.
minmax()
işlevi
Bu fonksiyon, bir parça için minimum ve maksimum boyut ayarlayabileceğiniz anlamına gelir.
Bu çok yararlı olabilir.
Yukarıdaki kalan alanı dağıtan fr
birimi örneğini alırsak
bu ifade
minmax(auto, 1fr)
tekniğiyle minmax()
.
Izgara, içeriğin esas boyutuna bakar.
Ardından, içeriğe yeterli alan sağladıktan sonra kullanılabilir alanı dağıtır.
Bu nedenle, her biri eşit oranda paylaşıma sahip olan parçaları alamayabilirsiniz
mevcut alanı kapsıyor.
Bir kanalı, ızgara kapsayıcısındaki boşluktan boşluklar çıkarılarak eşit pay almaya zorlamak için minimum değer değerini kullanın.
1fr
değerini, parça boyutu olarak minmax(0, 1fr)
ile değiştirin.
Bu, minimum içerik boyutunu değil, parçanın minimum boyutunu 0 yapar.
Daha sonra ızgara, kapsayıcıdaki mevcut boyutların tamamını alır.
ve tüm boşlukların tespit edilmesi için
ve gerisini fr birimlerinize göre paylaşın.
repeat()
gösterimi
Eşit sütunlara sahip 12 sütunlu bir kanal ızgarası oluşturmak isterseniz aşağıdaki CSS'yi kullanabilirsiniz.
.container {
display: grid;
grid-template-columns:
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr);
}
Ya da isterseniz
repeat()
:
.container {
display: grid;
grid-template-columns: repeat(12, minmax(0,1fr));
}
repeat()
işlevi, parça girişinizin herhangi bir bölümünü tekrarlamak için kullanılabilir.
Örneğin, parça kalıplarını tekrarlayabilirsiniz.
Ayrıca normal parçalarınız ve tekrarlanan bir bölümünüz de olabilir.
.container {
display: grid;
grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
}
auto-fill
ve auto-fit
Parça boyutlandırmayla ilgili olarak
öğrendiğiniz her şeyi,
minmax()
ve tekrarlayın,
kullanarak yararlı bir desen oluşturabilirsiniz.
Belki de sütun kanallarının sayısını belirtmek istemiyor,
ancak bunun yerine, kapsayıcınıza sığacak kadar çok öğe oluşturmak istiyorsanız.
Bunu repeat()
ve auto-fill
veya auto-fit
anahtar kelimeleriyle yapabilirsiniz.
Aşağıdaki demoda, kapsayıcıya sığacak şekilde en fazla 200 piksellik kanal oluşturulur.
Demoyu yeni bir pencerede açın ve görüntü alanının boyutunu değiştirdiğinizde ızgaranın nasıl değiştiğini görün.
Demoda uygun sayıda parça bulabiliyoruz.
Ancak kanallar esnek değildir.
En sonda 200 piksellik başka bir parça için yeterli alan olana kadar bir boşluk oluşur.
minmax()
işlevini eklerseniz
en az 200 piksel ve en fazla 1fr boyutunda olacak şekilde, uygun sayıda parça isteyebilirsiniz.
Izgara daha sonra 200 piksellik izleri yerleştirir ve kalan alan bunlara eşit olarak dağıtılır.
Bu sayede, medya sorgusuna gerek kalmadan iki boyutlu duyarlı bir düzen oluşturulur.
auto-fill
ile auto-fit
arasında küçük bir fark var.
Bir sonraki demoda, yukarıda açıklanan söz dizimini kullanarak ızgara düzeniyle oynayabilirsiniz,
ızgara kapsayıcıda yalnızca iki ızgara öğesi bulunur.
auto-fill
anahtar kelimesini kullanarak boş kanalların oluşturulduğunu görebilirsiniz.
Anahtar kelimeyi auto-fit
olarak değiştirdiğinizde kanallar 0 boyuta daraltılır.
Yani esnek kanallar artık büyüyerek alanı kullanabiliyor.
Aksi takdirde auto-fill
ve auto-fit
anahtar kelimeleri tam olarak aynı şekilde davranır.
İlk parça doldurulduktan sonra bunlar arasında fark yoktur.
Otomatik yerleştirme
Şimdiye kadar demolarda ızgara otomatik yerleşimini iş başında gördünüz. Öğeler, kaynakta göründükleri sırayla ızgaraya her hücre için bir tane olacak şekilde yerleştirilir. Birçok düzen için ihtiyacınız olan tek şey bu olabilir. Daha fazla kontrole ihtiyacınız varsa yapabileceğiniz birkaç şey vardır. İlki, otomatik yerleşim düzenini değiştirmektir.
Öğeleri sütunlara yerleştirme
Izgara düzeninin varsayılan davranışı, öğeleri satırlara yerleştirmektir.
Bunun yerine, grid-auto-flow: column
kullanarak öğelerin sütunlara yerleştirilmesine neden olabilirsiniz.
Satır kanalları tanımlamanız gerekir. Aksi takdirde öğeler, dahili sütun kanalları oluşturur.
uzun bir satır olacak şekilde düzenleyin.
Bu değerler dokümanın yazma moduyla ilgilidir.
Satır her zaman bir cümlenin, dokümanın veya bileşenin yazma modunda çalıştığı yönde çalışır.
Bir sonraki demoda modu grid-auto-flow
değeri ile writing-mode
özelliğini değiştirebilirsiniz.
Genişleme kanalları
Otomatik olarak yerleştirilen düzendeki öğelerin bazılarının veya tümünün birden fazla kanalı kaplamasına neden olabilirsiniz.
grid-column-end
veya grid-row-end
için değer olarak kapsanacak satır sayısı ile birlikte span
anahtar kelimesini kullanın.
.item {
grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
}
Bir grid-column-start
belirtmediğiniz için,
bu, auto
başlangıç değerini kullanır ve otomatik yerleştirme kurallarına göre yerleştirilir.
Aynı şeyi grid-column
kısaltmasını kullanarak da belirtebilirsiniz:
.item {
grid-column: auto / span 2;
}
Boşlukları doldurma
Bazı öğelerin birden çok kanala yayılan otomatik olarak yerleştirildiği düzen
bazı doldurulmamış hücrelerden oluşan bir ızgaraya neden olabilir.
Tamamen otomatik olarak yerleştirilmiş düzenle varsayılan ızgara düzeni davranışı
daima ileriye doğru ilerlemek.
Öğeler kaynaktaki sıralarına göre yerleştirilir.
veya order
özelliğindeki herhangi bir değişiklik.
Bir öğeyi sığdıracak kadar alan yoksa
bir boşluk bırakır ve sonraki kanala geçer.
Bir sonraki demoda bu davranış gösterilmektedir.
Onay kutusu, yoğun paketleme modunu uygular.
Bu, grid-auto-flow
için dense
değeri sağlayarak etkinleştirilir.
Bu değer uygulandıktan sonra,
ızgara düzeninde öğeler düzenin ilerleyen bölümlerinde alınır ve boşlukları doldurmak için kullanılır.
Bu durum, ekranın mantıksal sırayla bağlantısının kesileceği anlamına gelebilir.
Öğeleri yerleştirme
CSS ızgarasında zaten birçok işleviniz var. Şimdi, oluşturduğumuz ızgarada öğeleri nasıl konumlandırdığımıza bakalım.
Unutulmaması gereken ilk şey, CSS Izgara Düzeni'nin numaralı çizgilerden oluşan bir ızgaraya dayalı olduğudur. Öğeleri ızgaraya yerleştirmenin en basit yolu, öğeleri bir satırdan bir başkasına yerleştirmektir. Bu kılavuzdaki öğeleri yerleştirmenin diğer yollarını, ancak bu numaralı satırlara her zaman erişebilirsiniz.
Öğeleri satır numarasına göre yerleştirmek için kullanabileceğiniz özellikler şunlardır:
Bu kısayollar, aynı anda hem başlangıç hem de bitiş çizgilerini ayarlamanızı sağlayan kısaltmalar içerir:
Öğenizi yerleştirmek için yerleştirilmesi gereken ızgara alanının başlangıç ve bitiş satırlarını ayarlayın.
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 200px 100px);
}
.item {
grid-column-start: 1; /* start at column line 1 */
grid-column-end: 4; /* end at column line 4 */
grid-row-start: 2; /*start at row line 2 */
grid-row-end: 4; /* end at row line 4 */
}
Chrome Geliştirici Araçları, öğenizin nereye yerleştirildiğini kontrol etmeniz için size hatlarla ilgili görsel bir kılavuz sağlayabilir.
Satır numaralandırması, yazma modunu ve bileşenin yönünü izler. Bir sonraki demoda yazma modunu veya yönünü değiştirin öğelerinin yerleşiminin metnin akışıyla nasıl tutarlı kaldığını görebilirsiniz.
Öğeleri yığma
Satır tabanlı konumlandırmayı kullanarak öğeleri aynı ızgara hücresine yerleştirebilirsiniz.
Bu, öğeleri gruplandırabileceğiniz,
bir öğenin diğeriyle kısmen çakışmasına neden olabilir.
Kaynakta daha sonra gelen öğeler, daha önce gelen öğelerin üzerinde görüntülenir.
Yığın oluşturma sırasını, konumlandırılmış öğelerde olduğu gibi z-index
kullanarak değiştirebilirsiniz.
Negatif satır sayıları
grid-template-rows
ve grid-template-columns
kullanarak bir ızgara oluşturduğunuzda
açık ızgara olarak bilinen bir öğe oluşturursunuz.
Bu, tanımladığınız ve kanallara boyut atadığınız bir tablodur.
Bazen bu açık ızgaranın dışında görünen öğeleriniz olabilir.
Örneğin,
sütun kanalları tanımlayabilir ve ardından satır kanalları tanımlamadan çok sayıda ızgara öğesi satırı ekleyebilirsiniz.
Parçalar varsayılan olarak otomatik boyutlandırılır.
Tanımlanan açık ızgaranın dışındaki grid-column-end
kullanarak da öğe yerleştirebilirsiniz.
Her iki durumda da ızgara, düzenin çalışması için kanallar oluşturur.
ve bu yollar dolaylı tablo olarak adlandırılır.
Kapalı veya açık bir tabloyla çalışıyorsanız bunlar çoğu zaman herhangi bir fark yaratmaz. Ancak, satıra dayalı yerleşimde ikisi arasındaki temel farkla karşılaşabilirsiniz.
Negatif satır sayıları kullanarak, açık ızgaranın son satırına öğeler yerleştirebilirsiniz.
Bu, bir öğenin ilk sütun satırından son sütun satırına kadar yayılmasını istiyorsanız yararlı olabilir.
Bu durumda, grid-column: 1 / -1
kullanabilirsiniz.
Öğe, açık tablo boyunca uzanır.
Bununla birlikte, bu yalnızca açık ızgarada işe yarar. Otomatik olarak yerleştirilmiş üç satırlık bir düzen alın ilk öğenin ızgaranın son satırına kadar uzanmasını istediğiniz yere.
Bu öğeyi grid-row: 1 / -1
verebileceğini düşünebilirsiniz.
Aşağıdaki demoda bunun çalışmadığını görebilirsiniz.
İzler, örtülü ızgarada oluşturulur.
-1
kullanarak ızgaranın sonuna ulaşmanın bir yolu yoktur.
Örtülü parçaları boyutlandırma
Örtülü ızgarada oluşturulan parçalar varsayılan olarak otomatik boyutlandırılır.
Ancak satırların boyutunu kontrol etmek istiyorsanız
her bir arama terimi için
grid-auto-rows
mülkü,
ve sütunlar için
grid-auto-columns
.
Minimum 10em
ve maksimum auto
boyutunda tüm örtülü satırları oluşturmak için:
.container {
display: grid;
grid-auto-rows: minmax(10em, auto);
}
100 ve 200 piksel genişliğinde kanallar desenine sahip örtülü sütunlar oluşturmak için. Bu örnekte, ilk örtülü sütun 100 piksel olacaktır. ikinci 200 piksel ise üçüncü 100 piksel vb.
.container {
display: grid;
grid-auto-columns: 100px 200px;
}
Adlandırılmış kılavuz çizgileri
Satırlar sayı yerine ada sahipse öğeleri bir düzene yerleştirmek daha kolay olabilir. Köşeli parantezler arasından seçtiğiniz bir adı ekleyerek ızgaranızdaki herhangi bir satırı adlandırabilirsiniz. Birden çok ad eklenebilir bir boşlukla ayırın. Adlandırdıktan sonra sayıların yerine bu satırlar kullanılabilir.
.container {
display: grid;
grid-template-columns:
[main-start aside-start] 1fr
[aside-end content-start] 2fr
[content-end main-end]; /* a two column layout */
}
.sidebar {
grid-column: aside-start / aside-end;
/* placed between line 1 and 2*/
}
footer {
grid-column: main-start / main-end;
/* right across the layout from line 1 to line 3*/
}
Izgara Şablon Alanları
Izgaranın alanlarını adlandırabilir ve bu adlandırılmış alanlara öğe yerleştirebilirsiniz. Bu, bileşeninizin CSS'de nasıl göründüğünü görmenizi sağladığı için harika bir tekniktir.
Başlamak için ızgara kapsayıcınızın doğrudan alt öğelerine
grid-area
mülkü:
header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
footer {
grid-area: footer;
}
Ad, auto
ve span
anahtar kelimeleri dışında istediğiniz herhangi bir şey olabilir.
Tüm öğeleriniz adlandırıldıktan sonra
her bir arama terimi için
grid-template-areas
özelliğini kullanın.
Her satır, tırnak işaretleri içinde tanımlanır.
.container {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-areas:
"header header header header"
"sidebar content content content"
"sidebar footer footer footer";
}
grid-template-areas
kullanılırken uyulması gereken birkaç kural vardır.
- Değer, boş hücre içermeyen tam bir tablo olmalıdır.
- Parçaları yaymak için adı tekrarlayın.
- Ad tekrarlanarak oluşturulan alanlar dikdörtgen olmalıdır ve bağlantıları kesilemez.
Yukarıdaki kurallardan herhangi birini ihlal ederseniz değer geçersiz sayılır ve silinir.
Izgarada boşluk bırakmak için aralarında boşluk bırakmadan .
veya katlar kullanın.
Örneğin, ızgaradaki ilk hücreyi boş bırakmak için .
karakterden oluşan bir seri ekleyebilirim:
.container {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-areas:
"....... header header header"
"sidebar content content content"
"sidebar footer footer footer";
}
Tüm düzeniniz tek bir yerde tanımlandığından
medya sorguları kullanarak düzeni yeniden tanımlamayı kolaylaştırır.
Bir sonraki örnekte iki sütunlu bir düzen oluşturdum. Bu düzen, üç sütuna
grid-template-columns
ve grid-template-areas
değerini yeniden tanımlayarak.
Görüntü alanı boyutuyla oynamak ve düzen değişikliğini görmek için örneği yeni bir pencerede açın.
Ayrıca, grid-template-areas
özelliğinin writing-mode
ve yön ile ilişkisini görebilirsiniz.
diğer ızgara yöntemlerinde olduğu gibi.
Steno özellikleri
Izgara özelliklerinin çoğunu tek seferde ayarlamanıza olanak tanıyan iki kısa özellik vardır. Bunlar, tam olarak nasıl bir araya geldiklerini açıklayana kadar biraz kafa karıştırıcı görünebilir. Bunları mı yoksa uzun e-posta yöntemini mi tercih edeceğiniz size kalmış.
grid-template
grid-template
özelliği grid-template-rows
, grid-template-columns
ve grid-template-areas
için kullanılan bir kısaltmadır.
Önce satırlar tanımlanır,
ve grid-template-areas
değeriyle birlikte kullanılır.
Sütun boyutlandırması /
işaretinden sonra eklenir.
.container {
display: grid;
grid-template:
"head head head" minmax(150px, auto)
"sidebar content content" auto
"sidebar footer footer" auto / 1fr 1fr 1fr;
}
grid
mülkü
grid
kısaltmalar, grid-template
ile tamamen aynı şekilde kullanılabilir.
Bu şekilde kullanıldığında, kabul ettiği diğer ızgara özelliklerini başlangıç değerlerine sıfırlar.
Tam set:
grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow
Örtülü çizelgenin nasıl davranacağını belirlemek için bu kısaltmayı da kullanabilirsiniz. örneğin:
.container {
display: grid;
grid: repeat(2, 80px) / auto-flow 120px;
}
Uyum
Izgara düzeni, aşağıdaki kılavuzda öğrendiğiniz hizalama özelliklerini kullanır ve
flexbox.
Izgarada, justify-
ile başlayan özellikler satır içi eksende her zaman kullanılır.
cümlelerin çalışma yönünü değiştirir.
align-
ile başlayan özellikler blok ekseninde kullanılır,
blokların yerleştirildiği yönü izleyin.
justify-content
vealign-content
: ızgara kapsayıcısında parçaların etrafına veya aralarında ek boşluk bırakın.justify-self
vealign-self
: içinde bulunduğu ızgara alanı içinde taşımak için bir ızgara öğesine uygulanır.justify-items
vealign-items
: ifadeleri, öğelerdeki tümjustify-self
özelliklerini ayarlamak için ızgara kapsayıcısına uygulanır.
Fazladan alan dağıtılıyor
Bu demoda ızgara, sabit genişlikli yolların yerleştirilmesi için gereken alandan daha büyüktür.
Bu, ızgaranın hem satır içi hem de blok boyutlarında alanımız olduğu anlamına gelir.
Kanalların nasıl davrandığını görmek için farklı align-content
ve justify-content
değerlerini deneyin.
space-between
,
Ayrıca, iki kanalı kapsayan herhangi bir ızgara öğesi de boşluğa eklenen ek alanı kaplayacak şekilde büyür.
İçeriği taşıma
Arka planı renkli öğeler, yerleştirildikleri ızgara alanını tamamen dolduruyor.
çünkü justify-self
ve align-self
için ilk değer stretch
.
Bunun düzeni nasıl değiştirdiğini görmek için demoda justify-items
ve align-items
değerlerini değiştirin.
Izgara alanı boyutu değişmiyor,
öğeler, tanımlanan alan içinde hareket ettiriliyor.
Öğrendiklerinizi sınayın
Şebeke bilginizi test edin
Aşağıdakilerden hangileri CSS ızgara terimleridir?
main { display: grid; }
Izgaranın varsayılan düzen yönü nedir?
auto-fit
ile auto-fill
arasındaki fark nedir?
auto-fit
, hücreleri kapsayıcıya sığacak şekilde uzatır. auto-fill
, sığmaz.auto-fit
, bir kapsayıcıyı çocukların sığacağı şekilde uzatır. Burada auto-fill
, alt öğeleri kapsayıcıya sığdırır.min-content
nedir?
max-content
nedir?
Otomatik yerleştirme nedir?
grid-area
verildiği ve bu hücreye yerleştirildiğinde.Kaynaklar
Bu kılavuzda, ızgara düzeni spesifikasyonunun farklı bölümlerine genel bir bakış sunulmaktadır. Daha fazla bilgi edinmek için aşağıdaki kaynaklara göz atın.