[Row] Translation css code layout get response

Translation from: Lightning miners Translation Section

Original Address: medium.com/free-code-c...

Original author: Per Harald Borgen

Warehouse Original link: Issue

Translator: hanxiansen

In this article, I will teach you how to use CSS Grid to create a cool image of the grid map, which will change the number of columns based on the width of the screen. The most exciting part is that: all of the response characteristic is added to the line of css code. This means that we do not have to be ugly with HTML class name (such as col-sm-4, col-md-8) mixed together, you do not have to create a media query for each screen. ok, let's start now.

Set up

In this article, I will continue to use my first post CSS Grid Layout tutorial article grid layout. Then, we'll add a picture at the end of the article. Here's what we initialize the grid appearance:

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 examples of the style, but I did not write it here, because this has no effect on the CSS Grid Layout

If this code is confusing for you, I suggest you go down a good read my article Learn CSS Grid in 5 minutes , among them a detailed explanation of the basics of layout.

Let's start with adaptive characteristics make it a column.

Response Unit basis: fraction

CSS grid layout brings a new value: fractionthe unit, fractionthe unit often abbreviated as frit allows you to split the vessel into a plurality of blocks as needed.

Let's change the column to a fraction of each unit Width:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50px 50px;
}
复制代码

The result is the entire width of the grid layout will be divided into three fraction, a fraction occupy each column unit, the effect is as follows:

If we grid-template-columnschange the value of 1fr 2fr 3frthe width of the second column would be twice as the other two. The total width of the unit is now four fraction, the second column fraction occupies two units, the other half and a column fraction. Results are as follows:

Overall, fraction unit value will allow you to easily change the column width.

High response

However, the above Liezi did not give a response of what we want, because the grid is always three wide. We want to be able to change the number of columns of the grid according to the width of the container. To do this, you must learn the following three concepts:

repeat()

First, we learn 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)it is equal 100px 100px 100px. The first argument specifies the number of rows and columns, the second argument specifies the width thereof, thus will provide exactly the same layout as the start of us:

Auto-fit

Then auto-fit. Let us skip a fixed number of columns, the number will be replaced with an adaptive 3:

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: repeat(2, 100px);
}
复制代码

Results are as follows:

Now, the quantity will be adjusted in accordance with the grid width of the container. It will try to accommodate as much 100px wide columns in the container. But if we write all the columns hard to 100px, we will never be able to obtain the necessary flexibility, because they are difficult to fill the entire width. As you can see in the figure, the grid is usually left blank on the right.

minmax()

In order to solve these problems, we need minmax(). We 100px replaced 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);
}
复制代码

Note that all responses have occurred in the line of css code

Results are as follows:

As you can see, the effect is perfect. minmax()Function definition range greater than or equal min , less than or equal to max .

So now each column will be at least 100px. But if there is more space available, grid layout will simply be divided equally to each column, because these columns into a fraction units, instead of 100px.

add pictures

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

We add an image tag in each grid:

<div><img src="img/forest.jpg"/></div>
复制代码

To make the picture adapted to each entry, we will width and height set to the entry itself, we use object-fit:cover. This picture will cover its entire container, as required, the browser will be cut.

.container > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
复制代码

Results are as follows:

ok! Now that you've seen one of the most complex CSS Grid layout concepts, please give yourself a praise it.

Browser Compatibility

Before the end of this article, I mention the next browser support case, at the time of this writing, 77% of the global website will support CSS Grid, and the proportion is gradually rising.

I think 2018 will be the first year of CSS grid layout. It will be a breakthrough, and skills necessary to become front-end developers, as is the case in the past few years occurred as CSS Flexbox layout.

Reproduced in: https: //juejin.im/post/5d0ad9a4f265da1bae38ffe6