Translation from: Lightning Miners Translation Team

Original address: medium.com/free-code-c…

By Per Harald Borgen

Warehouse original link: issue

Translator: hanxiansen

Set up the

In this article, I will continue to use the Grid layout I used in my first CSS Grid layout tutorial article. We will then add the image at the end of the article. Here’s how we initialized the grid:

HTML code:

<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

The CSS code:

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

Note: There are some basic styles in the example, but I haven’t written them here because they have no effect on the CSS grid layout

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 unit: Fraction

The CSS raster layout introduces an entirely new value: the fraction unit, often abbreviated to FR, which allows you to split containers into blocks as needed.

Let’s change each column to a fraction unit width:

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

The result is that the grid layout will split the entire width into three fractions, each column occupying one fraction unit, with the following effect:

If we change the grid-template-columns value to 1fr 2FR 3FR, the second column will be twice as wide as the other two columns. The total width is now four fraction units, with the second column occupying two fraction units and the other columns each occupying one fraction. The effect is as follows:

In general, the fraction unit value will allow you to easily change the width of the column.

Senior response

However, the above example does not give the desired responsiveness because the grid is always three columns wide. We want the grid to change the number of columns depending on the width of the container. To do this, you must learn the following three concepts:

repeat()

First we’ll learn about the repeat() function. This is a powerful way to specify columns and rows. Let’s use the repeat() function to change the grid:

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

In the code above, repeat(3, 100px) equals 100px 100px 100px. The first parameter specifies the number of rows and columns, and the second parameter specifies their width, so it will give us exactly the same layout we started with:

auto-fit

And then auto-fit. Let’s skip the fixed number of columns and replace 3 with an adaptive number:

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

The effect is as follows:

Now, the grid will adjust its number according to the width of the container. It tries to fit as many 100px columns in the container as possible. But if we hardcoded all the columns to 100px, we would never get the elasticity we needed because they would be hard to fill the entire width. As you can see in the image above, the grid usually has a blank on the right.

minmax()

To solve the above problem, we need minmax(). We’ll replace 100px with minmax(100px, 1FR) as follows:

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

Notice that all responses occur in one line of CSS code

The effect is as follows:

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.

Therefore, each column will now be at least 100px. But if there is more space available, the grid layout will simply split it evenly among each column because the columns become fraction units instead of 100px.

Add images

The last step is to add the image. This has nothing to do with the CSS Grid layout, but let’s look at the code.

We add a picture label to each grid:

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

To make the image fit for each entry, we set its width and height to be the same as the entry itself, and we use object-fit:cover. This will make the image cover its entire container, and the browser will crop it as needed.

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

The effect is as follows:

Ok! Now that you understand one of the most complex concepts in CSS Grid layouts, give yourself a thumbs up.

Browser compatibility

Before I close, LET me mention browser support. At the time of writing, 77% of web sites around the world support CSS Grid, and the percentage is rising.

I think 2018 will be the first year of CSS grid layouts. It will break through and become a must-have skill for front-end developers, as has happened with the CSS Flexbox layout in the past few years.