CSS Grid оформление: умножете & завладейте - или как всъщност да проектирате с помощта на The Grid.

Можете да ме последвате в Twitter, за да получите уроци, JavaScript съвети и т.н.

В този урок ще създадем адаптивно оформление, използвайки CSS Grid. Ето и птичи поглед какво да очаквате от процеса:

За да добиете добра представа за това как работи flex опитайте редактора за оформление на flex на тази страница.

Цялата енчилада. Харесва ми да публикувам предварително изображението на изображението с гледка от птичи поглед, за да спестя време за превъртане.

С ръчни устройства, независими от резолюцията, нещата просто се усложниха. Те причиняват промяна на дори класическите отзивчиви правила за дизайн, IM.

И така, аз започнах в стремежа си да стандартизирам отзивчивия дизайн, като разгледам всички възможности на CSS мрежата, като това беше тест за IQ ... или нещо подобно ... И това е първият ми урок в поредицата за създаване на реални оформления с CSS мрежа.

Това, което открих, следва.

Основни идеи зад отдела на колоните

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

Дизайните с една колона ни помагат да поставим цялото си съдържание в дълъг вертикален списък.

Дизайните с две колони са добре за мини (галерия за таблети?) Изображения галерии / портфейли.

Дървесно-колоновите дизайни са първите по рода си, предлагащи граници (граници).

Дизайните с четири колони работят добре като галерии с изображения на цял екран.

Забелязах, че графите с нечетни числа (≥ 1) работят за оформления на граница.

Хм. какво ще кажете за дизайна с 5 колони? Не забравяйте, че колоните с нечетни номера често се използват за създаване на граници. Защото те винаги се оказват на 2 допълнителни страни.

Дизайните с пет колони могат да направят доста приличен @ среден формат на статията.

И в останалата част от този урок ще изследваме как да направим такъв!

Използвайте fr единици, за да ги накарате да се разширят така, както бихте направили марж: auto на обикновени елементи. Няма значение дали е 1fr или 2fr или n-fr за граници, стига основното съдържание да е посочено с помощта на пиксели или голяма (r) fr стойност (10fr, 20fr и т.н.):

Единствената разлика тук е, че Medium използва 1000px за широко съдържание и 700px за колоната на основната статия. Но идеята е същата.

Отзивчиви Grid + Going Mobile

Досега създадохме първичното скеле. Но какво да кажем за отзивчивия дизайн?

CSS Grid прави нещата по-лесни, отколкото си мислите!

Помня:

отзивчиво съдържание! = отзивчиви граници.

Двете техники трябва да се разглеждат отделно. Но…

Често - както в случая - е възможно да се реши проблемът с отзивчивото съдържание чрез решаване на проблема с отзивчивата граница.

Ако можете да използвате творчеството си за решаване на множество проблеми, като използвате една техника ... още по-добре.

Като казам това, в този случай можем да го решим просто като превключим външните ленти на вашия шаблон на 0.5fr (лилавите и сините.) И… също така да превключим или размах или диапазон на шаблона, за да се разширим в множество колони, което прави широко пространство за съдържание , (Розовата зона по-горе.)

Можете да направите това чрез медийни заявки или JavaScript.

И накрая ... сменете основната лента (зелена) на 10fr. (Можете да използвате подобна стойност, но обикновено ≥10 ще работи добре.) Това автоматично ще мащабира основната ви (зелена) лента до текущата разделителна способност на екрана. Тъй като и двете граници вече са 0.5fr, всичко, включително границите и съдържанието, ще се мащабира правилно.

Ако трябва да премахнете напълно 0,5fr граници, можете да ги зададете на 0fr. Но аз лично обичам да имам мъничка граница на мобилните изгледи. Това просто прави, че съдържателната лента изглежда по-добре според мен.

Отидете на мобилни

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

Урок, научен тук?

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

  • Това ли е единственото решение? Не.
  • Това идеално решение ли е? Не.
  • Но той решава проблема и той работи - достатъчно достатъчно.

И това е добро нещо, към което трябва да се стремим. Подходът, показан в този урок, е:

1. Повече възнаграждаване и забавление
 2. Респектиращо е
 3. Кани ви всъщност да разберете как и защо нещо работи.
 4. Това е просто. Следователно създава лесен за поддръжка код.
 5. Той произвежда чист код.
 6. Поддържа съвестта си чиста.

Говорейки за което ... в противен случай ... може да започнете да "хакнете" код. (Опитвате се да решавате проблеми чрез опит и грешка, често без да разбирате как всъщност работи.) Все пак ще направите нещата по този начин. И вероятно дори се чувствам изпълнение на някакви видове. Но ... няма да е забавно

Динамичен редактор на статии като носител?

Разбира се, в динамично генериран редактор на статии ще трябва да кодирате колоните с широко съдържание, за да работите алгоритмично. Никога не знаете каква комбинация от текст и широко съдържание авторът ще иска да използва.

Те могат да бъдат подредени по всякакъв начин. Но мисля, че използвайки JavaScript и няколко часа от вашето време, е възможно да си направите динамично генериран редактор на статии (точно като Medium), като разменяте области на шаблони за решетка, както е описано по-горе.

Все още можете да използвате това оформление (разбира се) за прости статични статии, ако ги проектирате сами на ръка и предварително знаете кой тип съдържание минава след това.

Non CSS мрежа-алтернатива за проектиране на средноподобни артикули?

Алтернативата без CSS мрежа? Е ... няма голяма разлика. Може би по-сложно. Все още е алгоритмичен, но в крайна сметка използвате обикновени DIV елементи.

Успех с това .

Мисля, че CSS решетката опростява процеса, без да жертва чист код.

Погледнах <изходния код> за страницата си със среден урок. Бъркотия е.

Заключителни думи

Предимно като JavaScript програмист, никога не съм бил добър в оформлението на уебсайтове или приложения. Особено след настъпването на отзивчивата ера. Но CSS решетката ме вдъхновява да преразгледам тази неуловима задача.

Просто трябваше да ми се показват стъпка по стъпка инструкции и примери за реално оформление, направено с CSS мрежа, за да мога да започна да правя своя собствена.

Но ... не можах да намеря нито един онлайн урок, който да демонстрира това. Затова реших да напиша своето и да го споделя с вас!

Всичко е в това да се опитате да разберете нещата въз основа на предназначението им.

Ако отделите време, за да опознаете добре CSS мрежата, това е като изневеряване.

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

В този момент трябва да кажа, че съм пристрастен към мрежата на CSS и ще го използвам от сега нататък за създаване на всички мои бъдещи оформления.

Надявам се тези прости идеи да ви помогнат да се запознаете по-добре с CSS Grid.

За повече седмични Freemium ...

Можете да ме следите в Twitter за раздаване на PDF през уикенда.

Следвайте ме в Instagram за бърз хит на JavaScript.

Можете да ме последвате във Facebook за безплатни кодиращи неща.

Оферта за определено време

Диаграмите в този урок бяха повлияни директно от ръкописа!

CSS Visual Dictionary 28% OFF за средни четци.

28% отстъпка

Само средни читатели:

CSS Visual Dictionary

== вземете копие ==

Съдържа всички CSS свойства.