CSSグリッドでレスポートレイアウトを作成する

Sep 14, 2025

操作方法

CSSグリッドレイアウト毎日ブラウザのサポートで成長しており、CSSグリッドを生産に出荷することができます。 CSSグリッドの迅速な採用は本当に驚くべきことです。

CSSグリッドでレスポンシブポートフォリオサイトレイアウトを作る前に、いくつかのことを明確にしましょう：CSSグリッドは代替品ではありません フレックスボックス 。それは浮動小数点の代わりにさえありません。実際には、CSSグリッドがはるかに優れているものを実行するためにFlexBoxを使用していることを認識するかもしれません。しかし、交換の面で考えるのではなく、組み合わせの観点から考えることができます。

15本当に有用なレスポンシブWebデザインチュートリアル

ピーナッツバターとゼリーサンドイッチを想像してみてください。ピーナッツバターとゼリーは彼ら自身でかなり素晴らしいですが、彼らが一緒になったとき、新しいことが生まれ、魔法が起こる。

これが私たちのものです ウェブサイトのレイアウト ツールのようなものです。彼らは彼らが個別にやることに素晴らしいですが、彼らが組み合わされているとき、魔法が起こり、そして私たちは新しいそして刺激的なレイアウトを作成することができます。この場合、CSSグリッドとFlexBoxを使用して、Web開発PB＆AMP; Web開発PB＆AMPを作成します。あなたのプロセスをさらに簡単にしたいですか？まともなものを選ぶ ウェブサイトビルダー 。

01.マークアップを設定します

case study title repeated — 私たちのレイアウトは多くのように見えませんが、私たちの6つのアイテムを持つスケルトンが整っています

このチュートリアルでは、CSS GridとFlexBoxを一緒に使用して応答的なポートフォリオレイアウトを作成するつもりです。これらの各ボックスは異なるサイズで、それらの一部が行を横切ってスパンし、各ボックスには下部にあるタイトルがあります。それを作るためにFlexBoxが付属している素晴らしいアライメントツールのいくつかを使用します。

マークアップを設定して始めましょう。

私たちはそのリストアイテムとそのすべてのものを6回複製しますので、プレイするアイテムがあります。疑問に思う場合は、私たちはを使うことにしました ul. これはエントリのリストであるため、要素。あなたに権利を感じるものは何でも無料で使ってください。

リスト項目の中にはAがあります div のクラスで .BOXES__TEXT-Wrapper それはケーススタディのタイトルとその付随する説明を含むでしょう。

02.基本スタイルを書く

case study title with different styling — 私たちは私たちのフォントを少しニカサーに設定し、見出しと段落からデフォルトのマージンを削除しました

今すぐ働くためにいくつかの基本スタイルを設定しましょう。

ボディ{
  フォントファミリー：Avenir、Sans-Serif。
  マージン：2rem auto;
  幅：95％。
}
H2、
P {
  マージン：0;
}
ul {
  リストスタイル：なし;
  パディング：0;
  マージン：0;
}
.Boxes＆GT; * {
  パディング：.5rem;
  背景色：＃333;
  カラー：白。

私たちはフォントをAvenirに変更しました。見出しと段落から余白を取り除き、順序付けられていないリストをリセットします。各リスト項目には、それぞれがどこにあるのかを確認するのに役立ついくつかのデフォルトスタイルを提供します。

03.グリッドを設定します

case study title with gaps between them — わずか3行で、グリッドアイテムの間に溝を追加し、それらを少し高くしました

私たちは最初に携帯電話のためのレイアウトを構築したいです。小さな画面でグリッドを設定することはこれほど簡単です。

。ボックス{
  表示：グリッド;
  grid-auto-rows：minmax（125px、Auto）;
  グリッドギャップ：.5rem;

デフォルトでは列しかないので、グリッドは互いにアイテムを積み重ねます。使用して各ケーススタディの間にいくつかのスペースを作成します グリッドギャップ - これにより、行と列の間にガッターを追加できます。

複雑な必要性にのみ列に余白を追加することを忘れる Nth-Child セレクタ;列の直後の列または行の間にのみ表示されます。 row.grid-GAP の略です グリッド列ギャップ そして グリッド行ギャップ 。通常はLonghandを使いますが、ブラウザが成長するように上書きするつもりですので、省略されます。

次に使用します グリッドオートロー グリッドコンテナに新しい行の高さを伝えます。グリッドは私たちのコンテンツをすべて配置するために新しい行を作成します。これらの自動作成された行のサイズを制御することができます。 グリッドオートロー 財産。私達は私達に利用可能な新しい機能を使用しています： minmax（） 。 withう minmax（） 最小サイズと最大サイズを指定できます。

コードを使用して、私たちは私たちの行が最低120pxと最大自動車になることを望んでいると言っています。コンテンツがそれを保証する場合、私たちは私たちの行が成長したいので、私たちはここで自動を使っています。

04.大きなブラウザの互換性を設定します

case study title in a row — 私たちのグリッドは形をしています！私達に私達のグリッドアイテムの間の溝が扱われる6列があります

私たちのブラウザが40em以上の場合、私たちのグリッドコンテナにはそれぞれ6列の1つの小数があります。

 @メディアスクリーンと（最小幅：40EM）{
  。ボックス{
    grid-template-columns：report（6,1fr）;
    グリッドギャップ：2ピクセル。
  }

グリッドテンプレート列 私たちが私たちが使用する財産は私たちのグリッドに何列が存在するべきかを伝えます。それは私たちが知っているすべての長さの単位を受け入れてください。 rem 、 em 、 PX. 、百分率、 vw. 、 v そして fr 。

the fr 私たちがCSSグリッドレイアウトで取得する新しいユニットです。それで、私たちはブラウザに私たちの代わりに数学をするように言うことができます。

ブラウザに1つの割合の6つの列を作成するようにブラウザに言うことで、ブラウザはグリッドコンテナの幅を計算し、それを6つの等しい列に分割します。また、グリッドがスマートなので、指定した溝を計算した後に残されたスペースは分割されます。

05.スタイルの個々のアイテム

case study title with an image behind — コーヒーはすべてをうまく見てもらえますか？また微妙なグラデーションは私たちのタイトルと説明が際立っている

私たちのケーススタディはちょうど灰色の箱として少しドリブを見ています。背景画像を追加しましょう。このボックスの下部に表示するためのタイトルを取得し、タイトルが際立って勾配を追加します。

。ボックスLI {
  背景 - イメージ：
    線形勾配（RGBA（0,0,0,0）、RGBA（0,0,0,0.8））、
    URL（パス/ /画像）;
  背景サイズ：カバー。
  表示：Flex;
  整列項目：フレックスエンド。

この背景イメージは無料のイメージでしたむだしゃしかし、どちらか望んでいるどちらの画像を使用することは自由に感じます。私はまた、私たちのテキストを私たちの箱の底に合わせるためにFlexBoxをミックスにしています。あなたはまだそれを見ることはありませんが、私たちがそれぞれの別のボックスを配置するので、あなたは最終的にそれをうまくいくでしょう。

06.グリッドにアイテムを置きます

case study title with one image above and five below — グリッドは私たちのグリッドアイテムのサイズを簡単にしますが、私たちは好きです。しかしこれは始まりに過ぎません

残念ながら、グリッドは、最初に見たグリッドレイアウトにアイテムを自動的に配置する方法はありません。しかし、私たちのために、Gridは私たちに手動で簡単にするためのツールを教えてください。このチュートリアルでは、NTH-Childを使用して各リスト項目を配置します。本番ウェブサイトでは、適切な計画を考えると、コンテンツヘビーサイトでこのようなレイアウトを自動化することが可能になるクラスを使用することをお勧めします。

私たちの最初の商品を始めましょう。

 @メディアスクリーンと（最小幅：40EM）{
  .Boxes Li：Nth-Child（1）{
    グリッド列：1 / -1;
    グリッド行：スパン3;
  }

ブラウザが40em以上の後にこのレイアウトが起こることをお勧めしますので、そのメディアクエリのすべてのプレースメントスタイルをすべて表示します。 withう Nth-Child 最初のリスト項目をターゲットにしています。 CSSグリッドを使用すると、商品をグリッド列とグリッド行で簡単に配置できます。アイテムがどこにあるべきかを指定するためのさまざまな方法がありますが、ここでは列行1から開始するように私たちのアイテムに-1を-1でスパンしています。

その後、グリッド行を使用して、アイテムに3行をスパンするように指示しています。 3行が欲しいサイズになることをどうやって知っていますか？さて、私たちはこれらの行のサイズをグリッドオートローで数瞬階前に指定しました、そして私たちが彼らに満足していないならば、我々は最小サイズを変更することができます。

残りの商品を置きましょう。

@mediaスクリーンと（最小幅：40em）{
  .Boxes Li：Nth-Child（2）{
    グリッド列：スパン2;
    グリッド行：スパン7;
  }

  .Boxes Li：Nth-Child（3）{
    グリッド列：スパン4;
    グリッド行：スパン3;
  }

  .Boxes Li：Nth-Child（4）{
    グリッド列：スパン2;
    グリッド行：スパン4;
  }

  .Boxes Li：Nth-Child（5）、
  .Boxes Li：Nth-Child（6）{
    グリッド列：スパン2;
    グリッド行：スパン2;
  }

それはどのくらいの管理グリッドレイアウトが私たちに与えるか驚くべきことではありませんか？数行のコードだけで、私たちはもっと多くのアイテムが追加された場合に壊されない完全に応答性のあるレイアウトをまとめることができます。

もちろん、彼らはデフォルトで1つのグリッド列と行を1つだけ取り上げるだけであるため、彼らはちょっとした若く見えるかもしれませんが、レイアウトを破ることはありません。これをfloats、および固定幅と高さでこれを行っていたら、より多くのコンテンツを追加する場合はバインドに入っています。

finished layout with different images in different places — 私たちの完成したレイアウト！この素晴らしいではありませんか？グリッドを使用すると、商品を2次元で簡単に配置できます。

古いブラウザについての素早い脇に

わかりました、部屋の中で象に対処する時が来ました。 '古いブラウザについてはどうですか？'この質問に対する答えは、CSSの新機能のための答えです。機能クエリを使用してカスケードを受け入れます。機能クエリです非常によく支持されていますそして、彼らが最初に私たちのフォールバックを置くことができない場所。たとえば、次の行に沿って何かを書きます。

 .your-selector {
  表示：Flex;
}

/ *あなたのグリッドコード* /
@Supports（ディスプレイ：グリッド）{
  表示：グリッド;
  grid-template-columns：report（3,1fr）;
  グリッドギャップ：1REM 2レム;

このようにコードを書くことは、ブラウザがグリッドレイアウトを理解している場合、FlexBoxの代わりに使用することができます。また、カスケードを受け入れているため、機能クエリを理解していないブラウザはそれらを無視し、すでに必要な情報を持っています。私たちがいつものスタイルをもう少しあなたのスタイルを書く方法を計画する必要があるかもしれませんが、それをすることによって私たちは賢明なフォールバックを使って楽しいレイアウトを作成することができます。古いページを保存したい場合は、それらをPDFとしてエクスポートしてから保存してください。 クラウドストレージ 。

また、時間が経つにつれて、CSSグリッドのサポートはますますサポートします。後でフォールバックを削除し、すべてのグリッド関連のCSSを残すことがどれほど素晴らしいことを考えてください。あなたがグリッドについてもっと知るように、それは私たちが今すぐ私たちがしていることが多くのCSSを持っていることがたくさんあることに気づくでしょう。特に複雑なサイトを手に入れた場合は、覚えておいてください。 ウェブホスティング Serviceはスクラッチするには必要です。

この記事は最初に登場しました ネットマガジン 、開発者やWebデザイナーのための世界大手雑誌。 ここで購読する 。

続きを読む：

CSSグリッドレイアウト秘密が明らかにされました
あなたのワークフローをスピードアップするための30 Webデザインツール
CSSグリッドを持つファッション柔軟なレイアウト

CSSグリッドでレスポートレイアウトを作成する

01.マークアップを設定します

02.基本スタイルを書く

03.グリッドを設定します

04.大きなブラウザの互換性を設定します

05.スタイルの個々のアイテム

06.グリッドにアイテムを置きます

古いブラウザについての素早い脇に

操作方法 - 最も人気のある記事

iPhoneでPhotoshopの方法（はい、それは物です）

Artrage 6からの詳細：ワークフローを後押しするための上のヒント

あなたのサイトのAlexaスキルを作成する方法

3Dモデルのための簡単なポーズ技術

ZbrushとMayaで3D人をモデル化することを学ぶ

CSS変数を使用してサイトテーマを設定する方法

色鉛筆をブレンドする方法

マヤへのあなたのZブラシモデルを入手する方法

カテゴリ