1行のCSSを追加してHTMLをレスポンシブにする方法

この記事では、CSSグリッドを使用して、画面の幅に応じて列数を変化させる非常にクールな画像グリッドを作成する方法を説明します。

そして最も美しい部分:応答性はCSSの1行で追加されます。

これは、HTMLを醜いクラス名(つまりcol-sm-4col-md-8)で乱雑にしたり、画面サイズごとにメディアクエリを作成したりする必要がないことを意味します。

レスポンシブウェブサイトを専門的なレベルで構築する方法を学びたい場合は、Scrimbaのレスポンシブウェブデザインブートキャンプをチェックすることを検討してください。初心者から上級者まで、15時間のインタラクティブなチュートリアルが必要です。

さあ、飛び込みましょう!

セットアップ

この記事では、最初のCSSグリッドの記事で使用したグリッドを続行します。次に、記事の最後に画像を追加します。最初のグリッドは次のようになります。

HTMLは次のとおりです。

 1 2 3 4 5 6 

そしてCSS:

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

注:この例には、基本的なスタイルも少し含まれていますが、CSSグリッドとは関係がないため、ここでは説明しません。

このコードで混乱する場合は、レイアウトモジュールの基本を説明している「5分でCSSグリッドを学ぶ」の記事を読むことをお勧めします。

列をレスポンシブにすることから始めましょう。

分数単位での基本的な応答性

CSSグリッドは、分数単位と呼ばれるまったく新しい値をもたらします。分数の単位はのようfrに記述されており、コンテナを必要な数の分数に分割できます。

各列を1分数単位幅に変更してみましょう。

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

ここで起こることは、グリッドが幅全体を3つの分数に分割し、各列がそれぞれ1単位を占めることです。結果は次のとおりです。

grid-template-columns値をに変更する1fr 2fr 1frと、2番目の列の幅は他の2つの列の2倍になります。全幅は4分数単位になり、2番目の幅は2つを占め、他の幅はそれぞれ1つを占めます。これがどのように見えるかです:

つまり、分数の単位値を使用すると、列の幅を非常に簡単に変更できます。

高度な応答性

ただし、このグリッドは常に3列の幅になるため、上記の例では必要な応答性が得られません。グリッドで、コンテナの幅に応じて列数を変更する必要があります。それを達成するには、3つの新しい概念を学ぶ必要があります。

繰り返す()

repeat()関数から始めましょう。これは、列と行を指定するためのより強力な方法です。元のグリッドを取得して、repeat()を使用するように変更しましょう。

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

つまり、repeat(3, 100px)はと同じです100px 100px 100px。最初のパラメーターは必要な列または行の数を指定し、2番目のパラメーターはそれらの幅を指定するため、これにより、最初に使用したのとまったく同じレイアウトが得られます。

オートフィット

次に、自動調整があります。列の数が固定されていることをスキップし、3をauto-fit。に置き換えましょう。

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

これにより、次の動作が発生します。

グリッドは、コンテナの幅に応じて列数を変更するようになりました。

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.

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.

.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.

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.

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.

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.

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

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.

.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.

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.

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.

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