Урок 10/32.
Сделал этот урок и решил поэкспериментировать и потасовать элементы в сетке.
grid-template-areas:
"w w l l "
"w w l l "
"g g l l "
"r r r r "
}
Как только я начал менять буквы в grid-template-areas так сразу же сетка развалилась? Где пресловутая гибкость, почему я не могу менять ячейки местами, тем более что они одинакового размера???
Решил почитать статьи по теме, там есть пара аналогичных примеров с готовой раскладкой прописанной в grid-template-areas. Закинул эти примеры в CodePen. https://codepen.io/syberian/pen/MWjoeba?editors=1100
Первая же попытка как-то поменять местами блоки или увеличить например блок main сразу же сломало все к чертям собачим.
И что у тебя не так? Нужно, чтобы каждая область была прямоугольной. Если ты пытаешься сделать что-то вроде этого:
“main main”
“main nav”
то естественно, все сломается. Пользуюсь grid-template-areas всегда, идеальный метод для раскладок.
“Нужно чтобы каждая область была прямоугольной”. Вот этого я как раз не знал. Думал что на гридах можно с помощью template-area сделать Г- образные блоки, или даже F-, E- образные. Не то чтобы это было сильно нужно, но в качестве эксперимент решил попробовать. Теперь буду знать в чем дело, спасибо.
