Making responsive HTML by adding one line to CSS

In this article I will tell you how to use CSS Grid to create a super cool grid of images, which varies the number of columns depending on the width of the screen.

And the cool thing: adaptability will be added with a single line of CSS.
This means that we do not need to clutter HTML with unnecessary classes ( Col-sm-4 , col-md-8 ) or create media queries for each screen size.

Consider all the details.

Customization

In this article we will continue working with the grid that we used in my first article on the CSS Grid . Then we add the images. Here’s what our initial grid looks like:
')

Here is the HTML:

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

Here is the CSS:

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

Note. In the example there are basic styles that I will not cover here, since they have nothing to do with the CSS Grid.

If this code is not clear to you, I would recommend that you read my article “ Learn CSS Grid in 5 Minutes ”, where I explain the basics of creating layouts.

To begin with, we will make the columns adaptive.

Basic adaptability with fr (fractional unit)

CSS Grid brings with it a completely new value called unit fraction. The unit fraction is written as fr , and it allows you to split the container into as many parts as you like.

Let's change the size of each column to 1fr.

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

What happens here is that the grid distributes the entire width into three parts, and each of the columns takes up one unit. Here is the result:


If we change the grid-template-columns 1fr 2fr 1fr to 1fr 2fr 1fr , the second column will be twice as wide as the other two columns. The total width is now equal to four units of fr, the second column occupies two of them, and the rest - one by one. Here's what it looks like:


In other words, the unit value of fr allows you to easily change the width of the columns.

Extended adaptability

However, the example above does not give us the adaptability that we want, since this grid will always be three columns wide. We want our grid to change the number of columns depending on the width of the container. To do this you will need to learn three new concepts.

repeat ()
We'll start with the repeat () function. This is a powerful way to specify columns and rows. Let's take the original grid and change it using repeat ():

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

In other words, repeat(3, 100px) identical to 100px 100px 100px . The first parameter indicates how many columns or rows you want, and the second determines their width, so this will give us the same layout we started with:


auto-fit
Instead of a fixed number of columns, let's define them automatically, replacing 3 with auto-fit.

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

This leads to the following behavior:


Now the grid changes the number of columns depending on the width of the container.

The browser is trying to place as many columns as possible 100 pixels wide in the container.

However, if we zakardkodim all columns exactly 100 pixels, we will never get the necessary flexibility, since they rarely will fill the entire width. As you can see on the gif above, the grid often leaves empty space on the right side.

minmax ()
The final ingredient we need to fix this is called minmax () . We simply replace 100px with minmax (100px, 1fr) .
Here is the final CSS.

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

Note that all adaptability is written in one CSS line.

This leads to the following behavior:


And, as you can see, it works great. The minmax () function defines a size range that is greater than or equal to min and less than or equal to max.

Thus, the columns will now always be at least 100 pixels. However, if there is more free space, the grid will allocate space equally to each column, since the columns will occupy 1fr instead of 100 px.

Adding Images

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

We will start by adding an image tag inside each element of the grid.



To fit an image into an element, we will set its width and height, just like the element itself, and then apply object-fit: cover ; . This will cause the image to cover the entire container, and the browser will cut it off if necessary.

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

Here's what happens:


That's all. Now you know one of the most complex concepts in the CSS Grid.

Browser Support

Before we finish, I also need to consider the support of CSS Grid browsers. At the time of this writing , 77% of browsers supported CSS Grid , and this percentage is growing.

I believe that 2018 will be the year of the CSS Grid. Grids will achieve their breakthrough and become a necessary tool for interface developers. Like what happened with Flexbox CSS over the last couple of years.

---

The translation was made with the support of the EDISON Software company, which is professionally engaged in software design (here are examples of technical specifications: one , two , three ), as well as software development for large customers ( microtomograph , mobile communications , city ​​lighting ).

---

Read more

• “Img” evolution: Gif without GIF format
• How to quickly design a site using CSS Grid
• Learn CSS Grid in 5 minutes