Как да създадете адаптивно оформление на CSS мрежа
медийни заявки
Нека вземем демонстрацията от предишния урок.
Страницата се състои от две мрежи: основната мрежа и вложена в един от елементите. Можем да контролираме нашите мрежи с медийни заявки. Това означава, че можем напълно да възстановим оформлението, за да пасне на различна ширина на екрана.
Практически курс за оформление на адаптивен уебсайт от нулата!
Вземете курса и научете как да създавате модерни уебсайтове в HTML5 и CSS3
За да се поберат на малки екрани, направихме междината на мрежата 10px по подразбиране. Ето какво имаме. Трябва също да забележите, че променяме свойствата за подложка и размер на шрифта на .grid-1 div чрез медийни заявки.
Нашата вложена мрежа
Кодът по-горе променя основното ни оформление. Все още обаче имаме вложена мрежа, която упорито отказва да се отърве от двете си колони на който и да е екран. За да коригираме това, ще направим абсолютно същото, но ще вземем различна точка на преход, използвайки метода на първо съдържание:
Можете да видите крайния резултат на CodePen. Струва си да се обърне внимание на:
Както казахме преди, можете да промените визуалния ред на елементите в мрежата, независимо от първоначалния им ред, а медийните заявки ви позволяват да подреждате елементи по различен начин на екрани с различна ширина. Не можем обаче визуално да местим вложени елементи. Те винаги трябва да бъдат деца на съответните си родителски блокове. Както визуално, така и в код.
Свойството за преход не взаимодейства по никакъв начин с оформлението на CSS Grid. Няма да можете да извършвате гладко преизграждане от едно оформление към друго, когато медийните заявки работят.
Автоматично довършване и функцията minmax().
Има друга отзивчива техника, подходяща за оформления с плочки, която може да се приложи към CSS Grid. Размер на блокаи местоположението им се изчисляват автоматично в зависимост от ширината на екрана.
Автоматично довършване
Досега подходът ни беше да зададем броя на песните и да видим дали елементите ги запълват правилно. Точно това можете да видите в демонстрацията по-долу. Зададохме свойството grid-template-columns: repeat(4, 1fr);, което казва на браузъра „да създаде четири колони и да ги направи с еднаква ширина“.
Практически курс за оформление на адаптивен уебсайт от нулата!
Вземете курса и научете как да създавате модерни уебсайтове в HTML5 и CSS3
Ключовата дума за автоматично попълване ни позволява да зададем ширината на пистите и мрежата ще изчисли колко елемента може да побере в наличното пространство. В демонстрацията взехме grid-template-columns: repeat(auto-fill, 9em);. Затова казахме на браузъра да създаде колони с ширина 9 em и да се побере колкото е възможно повече в контейнера.
Обърнете внимание, че сепараторите на междините на мрежата също се вземат предвид при изчисленията. Контейнерът е с тъмен фон, така че можете ясно да видите колко свободно място остава. В последния пример можете да видите, че има незапълнено пространство. Как работи?
функция minmax().
Функцията minmax() ви позволява да зададете минималния и максималния размер на пистата, така че решетката да работи в дадените граници. Например, можете да посочите три колони. Направете първите две широки 1fr, а последният задайте диапазона от максималната стойност от 1fr до минималната стойност от 160px: