Here we will implement an adaptive layout based on the width of the window, and do so in a very simple way, without adding complex class names (col-SM-4, COL-MD-8, etc.) to the HTML files, and without adding media queries for various screen sizes.

The setup

We use the following HTML template:

<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

And CSS:

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

Check out this article on Grid systems.

Basic responsiveness

A fraction unit in a Grid Grid system splits a row into equal units, written as FR.

Let’s set each column to a one-unit fractional unit and see the result:

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

You’ll notice that each element occupies a third of the line and changes as the line width changes.

If we set grid-template-columns to 1fr 2FR 1fr, the second column element is twice as wide as the other elements and the row is split into four equal shares.

Advanced responsiveness

Regardless of the width, the grid is always three columns, which is not the responsive layout we want. We want the grid to change the number of columns depending on the width. To do this, three concepts need to be understood.

repeat( )

The repeat() method is powerful and much more convenient than declaring the exact number of rows and columns, so we’ll change the previous code to repeat() :

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

Repeat (3, 100px) is the same as 100px 100px 100px 100px. The first parameter specifies how many rows or columns you want and the second parameter specifies the width, so it will have the same effect as the original:

auto-fit

Next comes auto-fit. Instead of writing out the exact number of columns, we now use auto-fit:

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

The results are as follows:

The container can now change the number of columns depending on the width.

Its behavior is to fit as many 100px columns in a row as possible.

However, fixing everything to 100px is not the responsive layout we want, and having a little white space on the right side of the page every time is uncomfortable.

minmax( )

Finally we need a property minmax(). Now we’ll replace 100px with minmax(100px, 1fr). The CSS looks like this:

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

You get the following result:

You can see that the minmax() function defines a range of sizes.

So the code above limits the column width to 100px or more, and the number of columns increases adaptively as the width increases.

Adding the images

Finally we add the image to achieve the effect of the image at the beginning of this article.

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

Now we use a new attribute: Object-fit: Cover, which allows the image to cover the entire container that contains it and automatically crop the excess.

Browser support

Related articles

CSS raster system