CMS4 > Статия

Чрез елемента "Решетка" можем да подреждаме съдържание на страница в редове и колони. Така то ще е по-прегледно, с необходимите отстояния и по-ясно за възприемане от посетителите на сайта. Вземаме елемента от "Основни елементи".

Добавяме го в основния контейнер чрез влачене и пускане. Елементът включва по подразбиране две колони, които са представени като два по-малки контейнера вътре в контейнера на грида.

При кликане върху елемента "Решетка" отгоре се отваря лента с опции. Също отстрани излиза меню с настройки на елемента.

Първата опция е за премстване на елемента - с влачене можем да поставим на желаното място на страницата.

Втората опция е за добавяне на колона.

От следващите две опции можем да изберем вертикално и хоризонтално подравняване.

Следва иконка за добавяне на предварителна настройка - тя ще ни е полезна, ако искаме да запазим създадената структура от колони за повторно лесно използване. Добавяме още една колона и избираме "Добави предварителна настройка".

В менюто, което се появява в дясната лента, можем да добавим изображение на настройката (за да я разпознаваме по-лесно) и е нужно да добавим заглавие и описание. Избираме дали настройката да се пази за този уебсайт или да е лична. 

Добавяме екранна снимка на структурата в контейнера "Качване на файл" - тази снимка ще ни ориентира какво представлява структурата. Попълваме другите полета.

След като сме добавили предварителната настройка, когато ни се налага да я използваме, можем да я намерим отляво на "Основни елементи". Иконкатата представлява квадрат от четири по-малки квадратчета.

При кликане на тази иконка запазените предварителни настройки се появявават долу по категории. В случая разгледаната е запазена за уебсайта. 

Когато искаме да я добавим на страницата, просто хващаме и влачим до мястото, където искаме да я сложим (както и с другите елементи). 

Ако имаме много съдържание на страницата и искаме да скрием грид в Live Editor, за да навигираме по-лесно между другите елементи, можем да използваме опцията "Свиване:

В резултат колоните не се виждат и цялата структура заема много по-малко място в Live Editor. Когато искаме отново да се показва изцяло, можем да върнем към първоначалното състояние с "Разширяване".

Следващата опция е клониране на елемента. Ако натиснем, същият грид ще се появи под избрания. 

Имаме и опции за изтриване и копиране на елементи. 

Настройките на елемента "Решетка" са от трите точки или при кликане два пъти. Можем да избираме брой колони в грида, как да са подравнени колоните в грида вертикално и хоризонтално (различните опции са илюстрирани с картинки). Следваща опция е No-gutter -  при слагане на отметка тук, ще махнем отстоянията между колоните, които са настроени да присъстват по подразбиране. Когато е активна Full-width настройката, то съдържанието ще излиза на цял екран. Имаме възможност и да не показваме грида на финалната публикувана страница чрез активиране на "Не показвайте елемента на финалната страница".

Сега нека разгледаме форматирането на колоните, съдържащи се в елемента "Грид". Имайте предвид, че колоните са подчинен елемент на елемента "Грид" и не могат да се добавят извън него. Когато кликнем върху някоя от тях, горе се появяват опции. Първите са за вмъкване на допълнителна колона преди или след избраната. 

Можем да изберем различна позиция на текущата колона по номер (вместо да я влачим ръчно).

Или пък директно да я преместим едно място напред.

Ако искаме да изтрием колона това става лесно от иконката с кошче.

Настройките на колоните са от трите точки или се отварят чрез двойно кликане.

Можем да избираме различни ширини на колоните според големината на екрана на устройството, през което се гледа уебсайта. Това променя и разположението на колоните една спрямо друга. Полето за съдържание на уебстраницата е разделено на 12 равни част и съответно можем да определяме върху колко от тези части да се разполага дадена колона. Ако например за мобилни устройства изберем колоните да са на цялата ширина (12), а за десктоп устройства да са на половината (6), то ако имаме две колони, то за мобилни устройства те ще са подредени една под друга, а за десктоп устройства - една до друга на един ред.

Пример за използване на "Решетка" с изображения и текст. Искаме да подредим текст в две колони около изображение. Следваме описаните стълки:

1. Добавяме елемента "Решетка". 

В първата колона добавяме текст в елемент "Текст".

В съседната колона качваме снимка в елемент "Изображение".

За да намалим голямото свободно пространство, можем да променим ширините на колоните. По подразбиране те са по цялата ширина (12) до 760px (Medium).

Отваряме настройките на първата колона, махаме от Remove тази настройка. Големината на колоните се променя и текстът се разпределя по цялата ширина вместо на половината. Колоната, в която е изображението, се премества на другия ред, защото няма място от 6 части на горния ред - той целият е зает сега от първата колона.

Ако премахнем същата настройка и от втората колона, то снимката ще се мащабира според съотношението и ще заеме цялата ширина. 

Ако предпочитаме да сместим колоните една до друга на един ред, избираме за всяка от тях ширина между 1 и 12. Като сборът между всички колони, които искаме да съберем на един ред, трябва да е 12. Ако сборът е повече от 12, няма да се съберат всички на реда и последната/последните ще се преместят на нов ред. Ако пък сборът е по-малко от 12, то ще имаме оставащо незапълнено пространство след последната колона.

В някои случаи може да предпочетем да имаме по-големи от стандартните отстояния между колоните или някоя колона да започва по-навътре от обичайната си позиция или да обособява свободно място след себе си. Тогава използваме Префикс и Суфикс. Например нека първата колона да започва по-навътре отляво. Даваме ѝ Префикс 1 и нагласяме размера на колоната да е 6. Трябва да имаме предвид, че Префикс и Суфикс се включват към общото място, което ще заема колоната. В случая колоната ще заема 6 + 1 позиция - общо 7 позиции (Тоест можем да добавим друга колона с ширина максимум 5 позиции (до 12), ако искаме да се събере на същия ред.) Съдържанието на колоната обаче ще се вмести само в размера на колоната - в 6 позиции и мястото, което заема префиксът, ще бъде свободно.

Ако добавим Суфикс, но имаме свободно пространство след него, което, не е заето, няма да можем да отличим Суфикса. Но ако сменим ширината на долната колона с изображението на 4, за да я качим на същия горен ред, то тогава ще можем да видим къде точно е пространството му - преди втората колона.