一行css解决响应式布局_如何通过添加一行CSS来使HTML响应

一行css解决响应式布局

In this article, I’ll teach you how to use CSS Grid to create a super cool image grid which varies the number of columns with the width of the screen.

在本文中，我将教您如何使用CSS Grid创建超酷的图像网格，该网格可随着屏幕宽度而改变列数。

And the most beautiful part: the responsiveness will be added with a single line of CSS.

最美丽的部分是： 响应性将通过一行CSS添加。

This means we don’t have to clutter up the HTML with ugly class names (i.e. col-sm-4, col-md-8) or create media queries for every single screen size.

这意味着我们不必使用丑陋的类名(即col-sm-4 ， col-md-8 )来整理HTML或为每个屏幕尺寸创建媒体查询。

If you want to learn to build responsive websites on a professional level, you can consider checking out Scrimba's responsive web design bootcamp, as it takes students from beginner to advanced through 15 hours of interactive tutorials.

如果您想学习在专业水平上构建响应式网站，可以考虑查看Scrimba的响应式网页设计训练营 ，因为它将使学生从初学者到高级学习者都需要15个小时的互动教程。

Now let’s jump into it!

现在开始吧！

设置 (The setup)

For this article, we’ll continue on with the grid we used in my first CSS Grid article. Then we’ll add the images at the end of the article. Here’s how our initial grid looks:

对于本文，我们将继续使用我的第一篇CSS Grid文章中使用的网格。 然后，我们将在文章末尾添加图像。 这是我们初始网格的外观：

Here’s the HTML:

这是HTML：

<div class="container">  
  <div>1</div>  
  <div>2</div>  
  <div>3</div>  
  <div>4</div>  
  <div>5</div>  
  <div>6</div>  
</div>

And the CSS:

和CSS：

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

Note: the example also has a little bit of basic styling, which I won’t go into here, as it’s got nothing to do with CSS Grid.

注意：该示例还具有一些基本样式，此处不再赘述，因为它与CSS Grid无关。

If this code confuses you, I’d recommend you to read my Learn CSS Grid in 5 minutes article, where I explain the basics of the layout module.

如果此代码使您感到困惑，建议您阅读5分钟内的 “ 学习CSS网格”文章，其中我将介绍布局模块的基本知识。

Let’s start by making the columns responsive.

让我们开始使列具有响应性。

分数单位的基本响应 (Basic responsiveness with the fraction unit)

CSS Grid brings with it a whole new value called a fraction unit. The fraction unit is written like fr, and it allows you to split the container into as many fractions as you want.

CSS Grid带来了一个全新的值，称为分数单位。 分数单位的写法类似于fr ，它使您可以将容器拆分为所需的任意分数。

Let’s change each of the columns to be one fraction unit wide.

让我们将每一列更改为一个小数单位宽度。

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

What happens here is that the grid splits the entire width into three fractions and each of the columns take up one unit each. Here is the result:

这里发生的是，网格将整个宽度分为三个部分，每列各占用一个单位。 结果如下：

If we change the grid-template-columns value to1fr 2fr 1fr, the second column will now be twice as wide as the two other columns. The total width is now four fraction units, and the second one takes up two of them, while the others take up one each. Here’s how that looks:

如果我们将grid-template-columns值更改为1fr 2fr 1fr ，那么第二列的宽度将是其他两列的两倍。 现在，总宽度为四个小数单位，第二个占两个，而其他每个占一个。 看起来是这样的：

In other words, the fraction unit value makes it super easy for you to change the width of the columns.

换句话说，分数单位值使您更容易更改列的宽度。

先进的响应能力 (Advanced responsiveness)

However, the example above doesn’t give us the responsiveness we want, as this grid will always be three columns wide. We want our grid to vary the number of columns with the width of the container. To achieve that, you’ll have to learn three new concepts.

但是，上面的示例并未提供我们想要的响应能力，因为此网格将始终为三列宽。 我们希望我们的网格根据容器的宽度来改变列数。 为此，您必须学习三个新概念。

重复() (repeat())

We’ll start with the repeat() function. This is a more powerful way of specifying your columns and rows. Let’s take our original grid and change it to using repeat():

我们将从repeat()函数开始。 这是指定列和行的更强大的方法。 让我们以原始网格并将其更改为使用repeat()：

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

In other words, repeat(3, 100px) is identical to 100px 100px 100px. The first parameter specified how many columns or rows you want, and the second specifies their width, so this will just give us the exact same layout as we started out with:

换句话说， repeat(3, 100px) 100px 100px 100px 。 第一个参数指定所需的列数或行数，第二个参数指定其宽度，因此这将为我们提供与开始时完全相同的布局：

自动适应 (auto-fit)

Then there’s auto-fit. Let’s skip having a fixed amount of columns, and rather replace 3 with auto-fit.

然后是自动调整。 让我们跳过固定数量的列，而是将3替换为auto-fit 。

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

This results in the following behaviour:

这导致以下行为：

The grid now varies the number of columns with the width of the container.

现在，网格随着容器的宽度改变了列数。

It simply tries to fit as many 100px wide columns into the container as possible.

它只是试图将尽可能多的100px宽的列​​放入容器中。

However, if we hard code all columns to be exactly 100px, we’ll never get the flexibility we want, as they’ll rarely add up to the full width. As you can see on the gif above, the grid often leaves white space on the right-hand side.

但是，如果我们将所有列硬编码为正好100px，我们将永远得不到我们想要的灵活性，因为它们很少累加到整个宽度。 如您在上面的gif上看到的那样，网格经常在右侧留下空白。

minmax() (minmax())

The final ingredient we need in order to fix this is called minmax(). We’ll simply replace 100px with minmax(100px, 1fr). Here’s the final CSS.

为了解决这个问题，我们需要的最终成分称为minmax() 。 我们将简单地将100px替换为minmax(100px, 1fr) 。 这是最终CSS。

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

Notice that all the responsiveness happens in a single line of CSS.

请注意，所有响应都在一行CSS中发生。

This results in the following behaviour:

这导致以下行为：

And as you can see that works perfectly. The minmax() function defines a size range greater than or equal to min and less than or equal to max.

正如您所看到的那样，它非常有效。 minmax()函数定义一个大小范围，该范围大于或等于min且小于或等于max。

So the columns will now always be at least 100px. However, if there is more available space, the grid will simply distribute this equally to each of the columns, as the columns turn into a fraction unit instead of 100 px.

因此，列现在将始终至少为100px。 但是，如果有更多可用空间，则网格将简单地将其平均分配到每个列，因为列变为小数单位而不是100 px。

添加图像 (Adding the images)

Now the final step is to add the images. This has nothing to do with CSS Grid, but let’s still look at the code.

现在，最后一步是添加图像。 这与CSS Grid无关，但让我们继续看一下代码。

We’ll start off by adding an image tag inside of each of the grid items.

我们将从在每个网格项目内添加图像标签开始。

<div>
    <img src="img/forest.jpg"/>
</div>

To make the image fit into the item, we’ll set it to be as wide and tall as the item itself, and then use object-fit: cover;. This will make the image cover its entire container, and the browser will crop it if it’s needed.

为了使图像适合项目，我们将其设置为与项目本身一样宽和高，然后使用object-fit: cover; 。 这将使图像覆盖其整个容器，如果需要，浏览器将对其进行裁剪。

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

Which ends up like the following:

最终如下所示：

And that’s it! You now know one of the most complex concepts in CSS Grid, so give yourself a pat on the back.

就是这样！ 您现在知道CSS Grid中最复杂的概念之一，因此请轻拍一下。

浏览器支持 (Browser support)

Before we end, I also need to mention browser support. At the time of writing this article, 93% of global website traffic supports CSS Grid, and it’s climbing. It's becoming more and more clear that Grid is turning into a must-have skill for front-end developers. Much like what has happened with CSS Flexbox a few years ago.

在结束之前，我还需要提及浏览器支持。 在撰写本文时， 全球93％的网站访问量都支持CSS Grid ，并且还在不断攀升。 越来越清楚的是，Grid已成为前端开发人员的必备技能。 就像几年前CSS Flexbox发生的事情一样。

If you want to learn Flexbox, Grid and responsive design once and for all, you should check out the responsive web design bootcamp on Scrimba. It'll take your beginner to advanced through interactive tutorials that are easy to follow.

如果您想一劳永逸地学习Flexbox，网格和响应式设计，则应在Scrimba上查看响应式Web设计新手训练营 。 它将通过易于理解的交互式教程将您的初学者带入高级。

---

---

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba, an interactive learning platform for learning to code.

谢谢阅读！ 我叫Per Borgen，我是Scrimba(一个用于学习代码的交互式学习平台)的共同创始人。

翻译自: https://www.freecodecamp.org/news/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431/

一行css解决响应式布局