Мрежата може да се дефинира като пресичащ се набор от вертикални и хоризонтални линии. Оформлението на CSS Grid разделя страницата на основни секции. Свойството Grid предлага система за оформление, базирана на мрежа, която има редове и колони. Това прави проектирането на уеб страници лесно без позициониране и плаване. Мрежовото оформление ни дава начин да създаваме мрежови структури, изобразени в CSS, а не в HTML.

Подобно на таблицата, той позволява на потребителя да подравнява елементите в редове и колони. Но в сравнение с таблиците е лесно да се проектира оформление с CSS мрежата. Можем да дефинираме колони и редове в мрежата, като използваме grid-template-rows и grid-template-colons Имоти.

Мрежов контейнер може да бъде създаден чрез деклариране на дисплей: решетка или дисплей: вградена мрежа на елемент. Контейнерът за мрежа съдържа елементите от мрежата, които са поставени вътре в редовете и колоните.

java цяло число към низ

Решетка срещу Flexbox

Често срещан въпрос, който обикновено възниква, е как мрежата е различна от flexbox. Мрежата е за двуизмерни оформления (редове и колони едновременно), докато flexbox се използва за едномерни оформления (или в ред, или в колона). Flexbox се използва, когато нещо трябва да бъде в права линия.

конвертиране на низ в enum

Flexbox се използва за подреждане на елементите в една колона или в един ред. От друга страна, мрежата е най-подходяща за подреждане на елементите в множество колони и редове.

Нека разберем решетката в CSS, използвайки пример.

Пример

 .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 

Изход