Shulou(Shulou.com)06/02 Report--

This article focuses on "how to create an image grid using CSS Grid". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to create an image grid using CSS Grid.

In this article, I'll show you how to use CSS Grid to create a cool image grid that changes the number of columns according to the width of the screen. The best part is that all the response features are added to a single line of css code. This means that we don't have to mix HTML with ugly class names (such as col-sm-4, col-md-8), nor do we have to create media queries for each screen. Ok, let's start the train.

HTML Code:

one

two

three

four

five

six

CSS Code:

.container {

Display: grid

Grid-template-columns: 100px 100px 100px

Grid-template-rows: 50px 50px

}

Note: there are some basic styles in the example, but I didn't write them here because this has no effect on the CSS grid layout.

If this code puzzles you, I suggest you read my article Learn CSS Grid in 5 minutes, which explains the basics of layout in detail.

Let's make the column adaptive.

Basic response unit: fraction

The CSS grid layout brings a whole new value: fraction units, which are usually abbreviated to fr, which allows you to split the container into multiple blocks as needed.

Let's change each column to one fraction unit width:

.container {

Display: grid

Grid-template-columns: 1fr 1fr 1fr

Grid-template-rows: 50px 50px

}

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

If we change the value of grid-template-columns 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, the second column occupies two fraction units, and the other columns each occupy one fraction. The effect is as follows:

Overall, the fraction unit value will make it easy for you to change the width of the column.

Advanced response

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

Repeat ()

First, let's 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)

}

In the above code, 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 provide us with exactly the same layout as at the beginning:

Auto-fit

And then auto-fit. Let's skip a 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)

}

The effect is as follows: the grid will now adjust the number of containers according to their width. It tries to hold as many 100px wide columns as possible in the container. But if we hard-write all the columns as 100px, we'll never get the elasticity we need, because it's hard for them to fill the entire width. As you can see in the image above, the grid usually leaves a blank on the right.

Minmax ()

To solve the above problem, we need minmax (). We replace 100px with minmax (100px, 1fr) with the following code:

.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:

As you can see, the effect is perfect. The range defined by the minmax () function is 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 free space, the grid layout will simply divide it evenly among each column, because these columns become fraction units rather than 100px.

Add Picture

The final step is to add a picture. This has nothing to do with the CSS Grid layout, but let's take a look at the code.

We add a picture tag to each grid:

To adapt the picture to each item, we set its width and height to be the same as the item itself, and we use object-fit:cover. This will make the image cover its entire container and will be cropped by the browser as needed.

.container > div > img {

Width: 100%

Height: 100%

Object-fit: cover

}

The effect is as follows:

At this point, I believe you have a deeper understanding of "how to create an image grid using CSS Grid". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.