How to make responsive HTML pages with a simple CSS __html

How to make responsive HTML pages with simple CSS#故事前端开发

In this article, I'll show you how to use a CSS grid to create a super cool image grid that changes the number of columns with the width of the screen.

The best thing about this response effect is that you just need to add a line of CSS.

This means that we don't have to give HTML a messy class name (that is, col-sm-4,col-md-8) or create a media query for each screen size.

Now let's get started.

Set up

Right

In this article, we'll continue to use the grid we used in the first CSS grid article. Then we'll add the picture at the end of the article. The following is the appearance of our initial mesh:

This is HTML:

  
  
  
  
  
  
</div>

And then the CSS:

    
    
    
}

Note: This example has some basic styles that I won't introduce here because it has nothing to do with CSS grid.

If this code makes you confused, I suggest you read my 5-minute study of the CSS grid, where I'll introduce the basics of the layout module.

Let's start getting the columns to respond.

basic response and fractional units

The CSS grid brings a whole new value---fractional unit. The fractional unit is FR, which allows you to divide the container into as many points as possible.

Let's change each column to the width of one fractional unit.

    
    
    
}

What happens here is that the grid divides the entire width into three parts, each of which occupies one unit. The results are as follows:

If we change the Grid-template-columns value to 1fr 2fr 1fr, the second column will now be twice times that of the other two columns. Now the total width is four fractional units, the second one is two, while the other one is accounted for. This will be the effect chart:

In other words, the fractional unit value allows you to change the width of the column very easily.

advanced ability to respond

However, the above example does not give us the response we want because the grid is always three columns wide. We want our grid to use the width of the container to change the number of columns. To do this, you have to learn three new concepts.

repeat ()

We'll start with this repeat () function. This is a more powerful way to specify columns and rows. Let's put our original grid and change the use of repeat ():

    
    
    
}

In other words, repeat (3, 100px) is the same as 100px 100px 100px. The first parameter specifies the number of columns or rows you want, and the second parameter specifies their width, so this will give us the same layout as we just started.

Auto Adjust

Then it's automatic adaptation. Let's skip a fixed number of columns and replace the Auto-fit with 3.

    
    
    
    
}

This can result in the following behavior:

The grid now uses the width of the container to change the number of columns. It simply tries to install as many 100px-wide columns into the container as possible.

However, if we put the hard coding of all the columns to 100 pixels, we will never get the flexibility we want because they are rarely added to the entire width. As you can see in the GIF above, the grid often leaves a blank on the right.

Minmax ()

In order to solve this problem, we need the final ingredient minmax (). We will simply replace the 100px Minmax (100px, 1FR). This is the final CSS.

    
    
    
    
}

Note that all responses occur in a row of CSS.

This can result in the following behavior:

As you can see, the perfect work. The Minmax () function defines a size range that is greater than or equal to min and less than or equal to max.

So the column is now always at least 100px. However, if more free space is available, the grid is simply assigned to each column because the column becomes a fractional unit instead of 100 pixels. Add Image

The final step now is to add an image. This has nothing to do with CSS grid, but we still need to look at the code.

We'll add a picture label to each grid item.

<div>  </div>

To fit the image into the project, we set it to be as wide and high as the project itself, and then use Object-fit:cover. This will make the image cover the entire container, and if necessary, the browser will crop it.

    
    height:100%
    
}

The results are as follows:

HD version Panorama

And that's it. You now know one of the most complex concepts in the CSS grid, so please give yourself a chance. Browser Support

Before we finish, I also need to mention browser support. In writing this article, 77% of the world's Web site traffic support CSS Grid, and is climbing.

I believe 2018 will be a year of CSS grid. It will be a breakthrough and will be a necessary skill for front-end developers. Just like the CSS Flexbox happened in the past few years.