Уверете се, че вашите оформления отговарят напълно с алтернативна мерна единица.

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

Научете за често срещаните проблеми, които ще срещнете, когато използвате проценти. Научете също за съвременните CSS техники, които да използвате вместо проценти. Тези техники ще ви дадат същия резултат като проценти без никакви недостатъци.

Пример за много проста мрежа

За да демонстрирате проблем с процентни единици, помислете за това HTML оформление:

<дивклас="контейнермоята мрежа">
 <дивклас="мрежов елемент">
див>
 <дивклас="мрежов елемент">
див>
див>

Външният елемент е основен див контейнерен елемент с две див деца. Всяко дете има мрежов елемент клас. За да превърнем контейнера в мрежа с две колони (две кутии), ще трябва да приложим следния CSS код:

instagram viewer 
тяло {
Цвят на фона: черен;
подравняване на елементи: център;
justify-content: гъвкав старт;
}
.my-grid {
дисплей: решетка;
grid-template-colons: 50% 50%;
марж: 3рем;
граница: 2pxтвърдозлато;
подплата: 1рем;
}
.grid-item {
граница: 3pxтвърдозлато;
подплата: 10рем 0;
заден план: син;
}

Така че всяка колона (елемент от мрежата) има златист цвят на фона. В родителския клас на контейнера задаваме мрежа-шаблон-колона до 50% за всяка колона. В резултат на това и двете кутии заемат 50% от общата ширина на контейнерния елемент.

Ето резултата:

Но има проблеми с това подравняване. Първо, ако решите да добавите a празнина към родителя на мрежата, детето може да прелее отстрани. Например, ако искате да добавите празнина: 3px към .my-grid блок в CSS, тогава ето как ще изглежда оформлението:

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

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

Това е така, защото всяка колона е 50% от родителската. В горния пример имаме 50% плюс 50% плюс тази празнина (3px), която избутва кутията извън контейнера.

Имайте предвид, че тази грешка не се случва само с 50-50. Можете да зададете първата колона на 75%, втората колона на 25% и грешката пак ще се появи. Ето защо трябва да използвате следното решение по-често.

Решението с дробни стойности

Решението е да се използват дробни стойности вместо проценти. Така че вместо да зададете първата колона на 75%, а втората на 50%, можете да зададете първата колона на 3fr и втората колона на 1fr:

grid-template-colons: 3фр 1фр

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

Друго предимство на използването на frs пред проценти - или друго абсолютни единици, като px или em— е, че можете да ги комбинирате с фиксирани стойности. Ето един пример:

grid-template-colons: 1fr 10rem;

С кода по-горе ще получите фиксирана стойност, която никога не се променя, независимо от размера на екрана. Това е така, защото колоната отдясно винаги ще остане на 10 rem, докато колоната отляво ще заема оставащото пространство (минус празнината).

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

По-реалистичен пример

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

.контейнер {
ширина: 100%;
дисплей: решетка;
grid-template-colons: 3фр 1фр;
празнина: 1.5rem;
}
.карта {
Цвят на фона: #5A5A5A;
подплата: 10px;
margin-bottom: .5rem;
}

Ето резултата:

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

Ето как можете да подредите всичко в колона, когато прозорецът за изглед достигне 55 em или по-малко:

@медия(максимална ширина: 55ем) {
.контейнер {
дисплей: flex;
flex-direction: колона;
 }
}

И резултатът ще изглежда така:

Сега не искате всяка карта да обхваща ширината на целия прозорец за изглед. По-скоро картите трябва да се показват една до друга. Най-добрият начин да постигнете това е с CSS мрежи. Но вместо да задавате фиксирани стойности на ширина (като 50%) за колоната-шаблон-решетка, използвайте повторение() функция, както следва:

.странична лента-решетка {
дисплей: решетка;
grid-template-colons: повторете(автоматично напасване, minmax(25рем, 1фр));
подравняване на съдържание: започнете;
празнина: 2рем;
}

Този CSS задава минимален размер от 25 rem и максимален размер от 1 fr. Този подход е много по-добър от задаването на фиксирани ширини, защото разчита на вътрешно оразмеряване. С други думи, позволява на браузъра да разбере нещата въз основа на наличните параметри.

Сега, когато намалите прозореца на браузъра до определена ширина, решетката автоматично се пренастройва до две кутии на ред.

Когато екранът стане по-малък, той пада до едно поле на ред. Така браузърът подрежда всичко едно върху друго. Всичко това се случва, докато преоразмерявате прозореца. Можете да използвате функция на браузъра като Chrome DevTools, за да разберете как работи този CSSи как преоразмеряването на прозорците променя оформлението.

Най-добрата част е, че нямате нужда от заявка за контейнер или нещо фантастично, за да направите елемента отзивчив. Просто задайте решетка и използвайте min-max() за задаване на дробни стойности вместо фиксирани размери.

Научете повече за CSS Grid

Ако искате да сте страхотни с CSS, трябва да имате задълбочени познания за CSS Grids. Решетките могат да бъдат доста мощни, когато се използват добре. Можете да постигнете почти всяко оформление, което искате, като използвате Grids. Това го прави незаменим инструмент в CSS.

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