Ето как можем да създадем адаптивен HTML чрез добавянето на само един CSS ред

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

Най-интересното е, че тази адаптивност се добавя с помощта на само един CSS ред. Това означава, че не се налага да затрупвате своя HTML с излишни класове, като например Col-sm-4 и col-md-8, както и да създавате запитвания за всеки отделен размер на екрана.

Нека да се спрем по подробно.

Настройки

Тук ще продължим работата с решетката, която използвахме в моята първа статия за CSS Grid. След това само ще добавим изображенията. Ето как изглежда нашата начална решетка:

Ето го HTML кода:

<div class="container">  
  <div>1</div>  
  <div>2</div>  
  <div>3</div>  
  <div>4</div>  
  <div>5</div>  
  <div>6</div>  
</div>

Ето го и CSS-а:

.container {  
    display: grid;  
    grid-template-columns: 100px 100px 100px;  
    grid-template-rows: 50px 50px;  
}

Забележка: в примера се използват някои базови стилове, които няма да разглеждам тук, понеже те нямат нищо общо с CSS Grid.

Да започнем със създаването на адаптивни колони.

Базова адаптивност с помощта на fr (fractional unit)

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

Нека да направим размера на всяка една колона равен на 1fr:

.container {  
    display: grid;  
    grid-template-columns: 1fr 1fr 1fr;  
    grid-template-rows: 50px 50px;  
}

В този случай решетката се разделя на три части, всяка от която заема една условна единица. Ето го резултатът:

Ако променим значението grid-template-columns с 1fr 2fr 1fr, то втората колона ще стане два пъти по-широка от другите. Общата ширина на решетката е четири условни fr единици, като втората колона заема две от тях, а останалите по една. Ето как изглежда това:

С други думи, чрез fr е възможно съвсем лесната промяна на ширината на колоните.

Разширена адаптивност

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

repeat()

Да започнем с функцията repeat(). Това е мощен метод за указване броя на колоните и редовете. Нека да променим нашата решетка и да използваме repeat () в нея:

.container {  
    display: grid;  
    grid-template-columns: repeat(3, 100px);  
    grid-template-rows: repeat(2, 50px);  
}

С други думи, repeat(3, 100px) е същото като 100px 100px 100px. В първия параметър се указва колко колони и колко редове искате, а вторият параметър определя тяхната ширина. така че отново получава същия като в началото макет:

auto-fit

Нека вместим фиксиран брой колони, да направим така, че те да бъдат определени автоматично, като заменим „3“ с auto-fit:

.container {  
    display: grid;  
    grid-gap: 5px;  
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: repeat(2, 100px);  
}

Това ще доведе до следното поведение:

Сега решетката променя броя на колоните в зависимост от широчината на контейнера.

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

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

minmax()

Окончателният градиент, който ни е необходим, за да оправим празното пространство отдясно е minmax(). Просто ще заменим 100px с minmax (100px, 1fr).

Ето го и окончателният CSS:

.container {  
    display: grid;  
    grid-gap: 5px;  
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 100px);  
}

Обърнете внимание, че цялата адаптивност се събира само в един ред CSS код.

По-горната промяна на кода ще доведе до следното поведение:

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

По този начин колоните винаги ще имат не по-малко от 100 пиксела. А ако е необходимо повече свободно място, то решетката автоматично ще разпредели мястото еднакво за всяка колона, понеже колоните ще заемат 1fr вместо 100 px.

Добавяне на изображения

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

Да започнем с поставянето на таг за изображение във всеки елемент на решетката.

<div><img src="img/forest.jpg"/></div>

За да може изображението точно да се събере в елемента, ние ще използваме същата широчина и височина, каквито има самият елемент, а след това ще използваме свойството object-fit: cover. Това ще накара изображението съвсем точно да покрие целия контейнер, а ако е необходимо, браузърът ще отреже излишното.

.container > div > img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
}

Ето какво се получава:

Това е всичко. Вече знаем една от най-сложните концепции в CSS Grid.

Статията е от месец декември 2017 година, като бе обновена на 22 октомври тази година. През 2017-та 77% от всички браузъри поддържат CSS Grid, а към днешен ден тази концепция се поддържа от всички популярни уеб браузъри. Решетките от този вид постепенно започнаха да се използват на практика навсякъде и се превърнаха в любим инструмент в ръцете на разработчиците на уеб интерфейси.