Izgara, kesişen dikey ve yatay çizgiler kümesi olarak tanımlanabilir. CSS Izgara düzeni, bir sayfayı ana bölümlere ayırır. Grid özelliği, satır ve sütunlardan oluşan ızgara tabanlı bir yerleşim sistemi sunar. Konumlandırma ve kaydırma olmadan web sayfalarının tasarımını kolaylaştırır. Izgara düzeni bize HTML'de değil, CSS'de gösterilen ızgara yapılarını oluşturmanın bir yolunu sunar.

Tabloya benzer şekilde, kullanıcının öğeleri satırlar ve sütunlar halinde hizalamasını sağlar. Ancak tablolarla karşılaştırıldığında, düzeni CSS ızgarasıyla tasarlamak kolaydır. Izgaradaki sütunları ve satırları kullanarak tanımlayabiliriz. ızgara-şablon-satırları Ve ızgara-şablon-sütunları özellikler.

Bir ızgara kapsayıcısı bildirilerek oluşturulabilir. ekran: ızgara veya ekran: satır içi ızgara bir element üzerinde. Izgara kapsayıcısı, satırların ve sütunların içine yerleştirilen ızgara öğelerini içerir.

jlist

Izgara vs Flexbox

Izgaranın esnek kutudan ne kadar farklı olduğu genellikle ortaya çıkan yaygın bir sorudur. Izgara, iki boyutlu düzenler içindir (aynı anda satırlar ve sütunlar), esnek kutu ise tek boyutlu düzenler için kullanılır (satır veya sütun halinde). Flexbox herhangi bir şeyin düz bir çizgide olması gerektiğinde kullanılır.

Java liste düğümü

Flexbox, elemanları tek bir sütunda veya tek bir satırda düzenlemek için kullanılır. Öte yandan, ızgara, birden çok sütun ve satırdaki öğeleri düzenlemek için en iyisidir.

Bir örnek kullanarak CSS'deki ızgarayı anlayalım.

Örnek

 .main { display: grid; grid: auto auto / auto auto auto auto; grid-gap: 10px; background-color: blue; padding: 10px; } .num { background-color: lightblue; text-align: center; color: black; padding: 10px 10px; font-size: 30px; } One Two Three Four Five Six Seven Eight 

Çıktı