Collect the

Per Harald Borgen https://medium.co…… (Original address)

Set up the

For this article, we’ll continue with the Grid we used in the first CSS Grid article. We will then add the image at the end of the article. Here’s what our initial grid looks like:

This 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>Copy the code

And CSS:

.container {display: grid; Grid-template-columns: 100px 100px 100px; The grid - the template - rows: 50 px 50 px; }Copy the code

Note: This example also has some basic styles that I won’t go over here because it has nothing to do with the CSS Grid.

If this code is confusing to you, I suggest you read my article Learn CSS Grid in 5 Minutes, which explains layout basics in detail.

Let’s make columns adaptive.

Basic response in fractional units

CSS Grid introduces a new value called fractional units. Fractional units are written like FR, which allows you to split the container into any fraction you want. Let’s change each column to a decimal unit width.

.container {display: grid; Grid-template-columns: 1fr 1fr 1fr; The grid - the template - rows: 50 px 50 px; }Copy the code

What happens here is that the grid divides the entire width into three sections, with each column occupying one unit. The results are as follows:

If you change the grid-template-columns value to 1fr 2FR 1fr, the second column will now be twice as wide as the other two columns. Now, the total width is four decimal units, two for the second and one for each of the others. It looks like this:

In other words, fractional unit values make it easier for you to change the width of the column.

Senior response

However, the above example does not provide the responsiveness we want because the grid will always be three columns wide. We want our grid to vary the number of columns depending on the width of the container. To do this, you must learn three new concepts.

Repeat ()

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

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

In other words, repeat(3, 100px) with the same 100px 100px 100px. The first parameter specifies the number of columns or rows needed, and the second parameter specifies its width, so this gives us exactly the same layout as we started with:

The adaptive

And then automatic adjustment. Let’s skip the fixed number of columns and replace 3 with auto-fit instead.

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

This results in the following behaviors:

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

It simply tries to pack as many elements as possible with a column width of 100px into the container.

However, if we hardcoded all the columns to exactly 100px, we would never get the flexibility we wanted because they rarely add up to full width. As you can see in the GIF above, the grid often leaves blank space on the right.

Minmax ()

To solve this problem, the final component we need is called minmax(). We will simply replace 100px with minmax(100px, 1fr). This is the final CSS.

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

Notice that all responses occur in a single line of CSS.

As shown in the figure:

And as you can see, it works perfectly. The minmax() function defines ranges greater than or equal to min and less than or equal to Max.

As a result, the column will now always be at least 100px. However, if there is more space available, the grid will simply allocate it evenly to each column because the columns become decimal units instead of 100 px.

Adding images

Now, the last step is to add the image. This has nothing to do with the CSS Grid, but let’s move on to the code.

We’ll start by adding image labels within each grid project.

<div> <img SRC = "img/forest.jpg" /> </ div>Copy the code

To make the image fit the project, we set it to be as wide and high as the project itself, and then use object-fit: cover; . This will cause the image to cover its entire container, and the browser will crop it if needed.

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

The final result looks like this:

That’s it! You now know one of the most complex concepts in the CSS Grid

Browser support

Before I close, I also need to mention browser support. At the time of this writing, 77% of the world’s web traffic supports CSS Grid, and it’s climbing. I believe 2018 will be the year of CSS Grid. It will break through and become a must-have skill for front-end developers. As has happened with CSS Flexbox in recent years. Or, check out a preview of the course.