Author: icepy @ know almost columns
https://zhuanlan.zhihu.com/p/69809343
In this article, I will teach you how to use CSS Grid to create a cool image grid, which will change the number of columns according to the width of the screen. The most exciting place is: all the response features are added to a 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), or create media queries for each screen. Ok, let's start.
Set up
In this article, I will continue to use the grid layout from my first CSS Grid layout tutorial article. Then, we will add a picture at the end of the article. Here is the appearance of our initial 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>
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 did not write them here because they have no effect on the CSS grid layout
If this code confuses 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: fractionunit, fractionusually abbreviated as unit fr, which allows you to split the container into multiple 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;
}
The result is that the grid layout will divide the entire width into three fractions, each column occupies a fraction unit, the effect is as follows:
If we change grid-template-columnsthe value to 1fr 2fr 1fr, the width of the second column will be twice that of 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:
In general, the fraction unit value will allow you to easily change the width of the column.
Advanced response
However, the above Liezi does not give 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 we learn about repeat()functions. This is a powerful way to specify columns and rows. Let's use a repeat()function to change the grid:
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 50px);
}
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 provide us with exactly the same layout as at the beginning:
Auto-fit
Then yes auto-fit. Let's skip the fixed number of columns and replace 3 with the 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:
Now, the grid will adjust its number according to the width of the container. It will try to fit as many 100px wide columns as possible in the container. But if we hard-code all the columns as 100px, we will never get the flexibility we need because they are difficult to fill the entire width. As you can see in the image above, the grid is usually left blank on the right.
minmax()
In order to solve the above problems, we need minmax(). We will replace 100px with minmax(100px, 1fr), the code is as follows:
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: repeat(2, 100px);
}
Please note that all responses occur in one line of css code
The effect is as follows:
As you can see, the effect is perfect. minmax()The range defined by the 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 available space, the grid layout will simply divide it into each column, because these columns become fraction units instead of 100px.
add pictures
The last step is to add pictures. This has nothing to do with the CSS Grid layout, but let's look at the code.
We add an image tag to each grid:
<div><img src="img/forest.jpg"/></div>
The object-fit set cover, which will allow it to cover the picture of the entire container will be cut as required browser.
.container > div > img {
width: 100%;
height: 100%;
object-fit: cover;
}
The effect is as follows:
ok! Now that you have understood one of the most complex concepts in CSS Grid layout, please give yourself a thumbs up.
Browser compatibility
Before ending this article, I mention browser support. At the time of writing this article, 77% of global websites will support CSS Grid, and the proportion is still rising.
I think 2018 will be the first year of CSS grid layout. It will achieve breakthroughs and become a must-have skill for front-end developers, just like what has happened with CSS Flexbox layouts in the past few years.
study Exchange
Follow the public account [Frontend Universe], get good article recommendations every day
Add WeChat, join the group to communicate
"Watching and forwarding" is the greatest support