Как да направите вашия HTML отзивчив, като добавите един ред CSS

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

И най-красивата част: отзивчивостта ще бъде добавена с един ред CSS.

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

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

Сега нека скочим в него!

Конфигурацията

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

Ето HTML:

 1 2 3 4 5 6 

И CSS:

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

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

Ако този код ви обърква, бих ви препоръчал да прочетете моята статия Learn CSS Grid за 5 минути, където обяснявам основите на модула за оформление.

Нека започнем, като направим колоните отзивчиви.

Основна реакция с фракционната единица

CSS Grid носи със себе си съвсем нова стойност, наречена дробна единица. Фракционната единица е написана като frи ви позволява да разделите контейнера на толкова фракции, колкото искате.

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

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

Това, което се случва тук, е, че мрежата разделя цялата ширина на три фракции и всяка от колоните заема по една единица. Ето резултата:

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

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

Разширена реакция

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

повторение ()

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

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

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

автоматично прилягане

След това има автоматично напасване. Нека да пропуснем да имаме фиксирано количество колони и по-скоро да заменим 3 с auto-fit.

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

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

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

Той просто се опитва да вмести колкото е възможно повече колони с ширина 100px в контейнера.

Ако обаче кодираме всички колони с точно 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()функцията определя с размер по-голям от или равен на минути и по-малко от или равно на макс.

So the columns will now always be at least 100px. However, if there is more available space, the grid will simply distribute this equally to each of the columns, as the columns turn into a fraction unit instead of 100 px.

Adding the images

Now the final step is to add the images. This has nothing to do with CSS Grid, but let’s still look at the code.

We’ll start off by adding an image tag inside of each of the grid items.

To make the image fit into the item, we’ll set it to be as wide and tall as the item itself, and then use object-fit: cover;. This will make the image cover its entire container, and the browser will crop it if it’s needed.

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

Which ends up like the following:

And that’s it! You now know one of the most complex concepts in CSS Grid, so give yourself a pat on the back.

Browser support

Before we end, I also need to mention browser support. At the time of writing this article, 93% of global website traffic supports CSS Grid, and it’s climbing. It's becoming more and more clear that Grid is turning into a must-have skill for front-end developers. Much like what has happened with CSS Flexbox a few years ago.

If you want to learn Flexbox, Grid and responsive design once and for all, you should check out the responsive web design bootcamp on Scrimba. It'll take your beginner to advanced through interactive tutorials that are easy to follow.

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba, an interactive learning platform for learning to code.