ホームページ >ウェブフロントエンド >CSSチュートリアル >簡単で応答性の高い最新のCSSグリッドレイアウト

簡単で応答性の高い最新のCSSグリッドレイアウト

Joseph Gordon-Levittオリジナル: 2025-02-10 10:13:10749ブラウズ

Easy and Responsive Modern CSS Grid Layout

コアポイント

CSSグリッドは、HTMLではなくCSSでグリッド構造を作成できる強力なレイアウトシステムです。ほとんどの最新のブラウザは、古いバージョンをサポートするIE11を除き、それをサポートしています。
この記事では、応答性の高い最新のCSSグリッドレイアウトを作成し、徐々にCSSグリッドを追加し、古いブラウザーにフォールバックコードを提供する方法を示しています。これには、中心要素へのテクノロジー、スパンプロジェクト、および小型機器のレイアウトを調整することが含まれます。
CSSグリッドは、グリッドアイテムを見つけるためにgrid-columnやgrid-rowなどのユーティリティを提供し、justify-items、align-items、align-selfなどのプロパティを配置して調整および調整します。また、グリッドチャイルドエレメント自体がグリッドコンテナになる可能性のあるネストされたグリッドも許可します。
小さな画面デバイスの場合、レイアウト構造を簡単に変更してCSSグリッドで線形化し、グリッド領域を再定義し、メディアクエリを使用できます。これにより、小さな画面でより便利なレイアウトになります。

この記事では、応答性の高い最新のCSSグリッドレイアウトを作成する方法、古いブラウザにフォールバックコードを使用する方法、CSSグリッドをステップバイステップで追加する方法、および小型デバイスのレイアウトを再構築し、Alignment属性センターリングを使用する方法を示します。要素。

以前の記事では、応答性の高いグリッドレイアウトを簡単に構築するための4つの異なる手法を調査しました。この投稿は2014年にCSSグリッドが利用可能になる前に書かれたため、このチュートリアルでは、同様のHTML構造を使用しますが、最新のCSSグリッドレイアウトを使用します。

このチュートリアルでは、Floatを使用して基本的なレイアウトを備えたデモを作成し、CSSグリッドで強化します。センターリング要素、プロジェクトにまたがる、グリッド領域を再定義してメディアクエリを使用することにより、小さなデバイスのレイアウトを簡単に変更するなど、多くの有用なユーティリティを実証します。このCodepen：

Codepenリンクでコードを見つけることができます。

レスポンシブモダンなCSSグリッドレイアウト

応答性の高いグリッドデモンストレーションを作成する前に、最初にCSSグリッドを紹介しましょう。

CSSグリッドは、2017年にほとんどの最新のブラウザに追加された強力な2次元システムです。 HTMLレイアウトの作成方法を完全に変更します。グリッドレイアウトにより、HTMLではなくCSSでグリッド構造を作成できます。

IE11に加えて、ほとんどの最新のブラウザはCSSグリッドをサポートしています。 Caniuse.comを使用してサポートを確認できます。

グリッドレイアウトには、

プロパティがdisplayまたはgridに設定されている親コンテナがあります。コンテナの子要素はグリッドアイテムであり、強力なグリッドアルゴリズムのために暗黙的に配置されます。また、さまざまなクラスを適用して、プロジェクトの配置、サイズ、位置、その他の側面を制御することもできます。 inline-grid

基本的なHTMLページから始めましょう。 HTMLファイルを作成し、以下を追加します

<code class="language-html"><!DOCTYPE html>


  <title>CSS Grid Layout Example</title>
  <link rel="stylesheet" href="style.css">


  <header>
    <h2>CSS Grid Layout Example</h2>
  </header>
  <aside class="sidebar">
    <p>Sidebar</p>
  </aside>
  <main>
    <article>1</article>
    <article>2</article>
    <article>11</article>
  </main>
  <footer>
    <p>Copyright 2018</p>
  </footer>

</code>

HTMLセマンティクスを使用して、ページのタイトル、サイドバー、ボディ、フッターパーツを定義します。メインセクションでは、アイテムのセットを追加するために

タグを使用します。 <article></article>は、独立した自己完結型コンテンツをラップするために使用できるHTML5セマンティックタグです。単一のページには、任意の数の<article></article>タグを含めることができます。 <article></article>

これは、この段階のページのスクリーンショットです：

Easy and Responsive Modern CSS Grid Layout

次に、基本的なCSSスタイルを追加しましょう。ドキュメントの先頭に

タグを追加し、次のスタイルを追加します。 <style></style>

これは小さなデモページであるため、クラスの命名システムを適用するのではなく、読みやすさのためにタグを直接スタイリングします。

<code class="language-css">body {
  background: #12458c;
  margin: 0rem;
  padding: 0px;
  font-family: -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
            "Fira Sans", "Droid Sans", "Helvetica Neue",
            sans-serif;
}

header {
  text-transform: uppercase;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #fff;
  border-style: solid;
  border-width: 2px;
}

aside {
  color: #fff;
  border-width:2px;
  border-style: solid;
  float: left;
  width: 6.3rem;
}

footer {
  color: #fff;
  border-width:2px;
  border-style: solid;
  clear: both;
}

main {
  float: right;
  width: calc(100% - 7.2rem);
  padding: 5px;
  background: hsl(240, 100%, 50%);
}

main > article {
  background: hsl(240, 100%, 50%);
  background-image: url('https://source.unsplash.com/daily');
  color: hsl(240, 0%, 100%);
  border-width: 5px;
}</code>

フロートを使用してサイドバーを左に配置し、本体を右に配置し、サイドバーの幅を固定

6.3REM

幅に設定します。次に、CSS 関数を使用して、身体部分の残りの幅を計算して設定します。主な部分には、垂直ブロックに編成されたプロジェクトのライブラリが含まれています。 calc()

Easy and Responsive Modern CSS Grid Layout レイアウトは完璧ではありません。たとえば、サイドバーの高さは、メインコンテンツ部分の高さとは異なります。これらの問題を解決できるさまざまなCSS技術がありますが、ほとんどはヒントまたは回避策です。このレイアウトはグリッドのフォールバックであるため、ユーザーが少なくなります。フォールバックは利用可能で、十分です。

Chrome、Firefox、Edge、Opera、およびSafariの最新バージョンはすべてCSSグリッドをサポートします。つまり、訪問者がこれらのブラウザを使用している場合、フォールバックを提供することを心配する必要はありません。また、Evergreenブラウザを検討する必要があります。 Chrome、Firefox、Edge、Safariの最新バージョンは、常緑ブラウザーです。つまり、ユーザーに促すことなく、自動的かつ静かに自分自身を更新します。すべてのブラウザでレイアウトが適切に機能するようにするために、フローティングベースのデフォルトのフォールバックから始めて、プログレッシブエンハンスメントテクニックを使用して最新のグリッドレイアウトを適用できます。古いブラウザを使用するユーザーは同じエクスペリエンスを得ることはありませんが、それで十分です。

プログレッシブエンハンスメント：すべてをカバーする必要はありません

フォールバックレイアウトの上にCSSグリッドレイアウトを追加する場合、すべてのタグを上書きしたり、完全に個別のCSSスタイルを使用する必要はありません。

CSSグリッドをサポートしていないブラウザでは、追加するグリッドプロパティは単純に無視されます。
フロートを使用して要素をレイアウトする場合、グリッドアイテムがフロートよりも優先されることを忘れないでください。つまり、グリッド要素（float: left|rightスタイルで親要素の子）でもある要素にdisplay: gridスタイルを追加すると、フロートは無視され、グリッドが撮影されます。
@supportsルールを使用して、CSSの特定の機能のサポートを確認できます。これにより、必要に応じてフォールバックスタイルをオーバーライドすることができますが、古いブラウザは@supportsブロックを無視します。

さあ、ページにCSSグリッドを追加しましょう。まず、グリッドコンテナとしてをマークし、グリッド列、行、領域を設定しましょう。

<code class="language-html"><!DOCTYPE html>


  <title>CSS Grid Layout Example</title>
  <link rel="stylesheet" href="style.css">


  <header>
    <h2>CSS Grid Layout Example</h2>
  </header>
  <aside class="sidebar">
    <p>Sidebar</p>
  </aside>
  <main>
    <article>1</article>
    <article>2</article>
    <article>11</article>
  </main>
  <footer>
    <p>Copyright 2018</p>
  </footer>

</code>

プロパティを使用して、グリッドコンテナとしてdisplay:gridをマークします。 0.1VWのグリッドギャップを設定します。ギャップにより、マージンを使用する代わりに、グリッドセル間にスロットを作成できます。また、を使用して2つの列を追加します。最初の列は6.5 REMの固定幅を採用し、2番目の列は残差幅を採用します。 grid-template-columnsは分数単位であり、1FRは利用可能なスペースの一部に等しくなります。 fr

次に、3行を追加するために

を使用します。 1列目は6レムの固定高さを使用し、3列目は3レムの固定高さを使用し、残りの自由空間（1FR）は2列目に割り当てられます。 grid-template-rows

次に、

を使用して、列の交差点と領域への行によって生成された仮想セルを割り当てます。これで、grid-template-areasを使用して、エリアテンプレートで指定された領域を実際に定義する必要があります。 grid-area

ほとんどのフォールバックコードには、身体部分の幅

<code class="language-css">body {
  background: #12458c;
  margin: 0rem;
  padding: 0px;
  font-family: -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
            "Fira Sans", "Droid Sans", "Helvetica Neue",
            sans-serif;
}

header {
  text-transform: uppercase;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #fff;
  border-style: solid;
  border-width: 2px;
}

aside {
  color: #fff;
  border-width:2px;
  border-style: solid;
  float: left;
  width: 6.3rem;
}

footer {
  color: #fff;
  border-width:2px;
  border-style: solid;
  clear: both;
}

main {
  float: right;
  width: calc(100% - 7.2rem);
  padding: 5px;
  background: hsl(240, 100%, 50%);
}

main > article {
  background: hsl(240, 100%, 50%);
  background-image: url('https://source.unsplash.com/daily');
  color: hsl(240, 0%, 100%);
  border-width: 5px;
}</code>

を除き、CSSグリッドに副作用はありません。

は、サイドバーの幅とマージン/充填スペースを差し引いた後、体の部分の残りの幅を計算します。 width: calc(100% - 7.2rem);

これは結果のスクリーンショットです。メインエリアは残りのすべての幅を占有していないことに注意してください：

Easy and Responsive Modern CSS Grid Layout この問題を解決するために、グリッドをサポートするときに

を追加できます：

width: auto;

これは、現在の結果のスクリーンショットです：

<code class="language-css">body {
  /*...*/
  display: grid;
  grid-gap: 0.1vw;
  grid-template-columns: 6.5rem 1fr;
  grid-template-rows: 6rem 1fr 3rem;
  grid-template-areas: "header   header"
                       "sidebar content"
                       "footer footer";  
}</code>

Easy and Responsive Modern CSS Grid Layout ネストされたメッシュを追加します

グリッドチャイルドエレメント自体は、グリッドコンテナにすることができます。メインパーツをグリッドコンテナとして設定しましょう：

<code class="language-html"><!DOCTYPE html>


  <title>CSS Grid Layout Example</title>
  <link rel="stylesheet" href="style.css">


  <header>
    <h2>CSS Grid Layout Example</h2>
  </header>
  <aside class="sidebar">
    <p>Sidebar</p>
  </aside>
  <main>
    <article>1</article>
    <article>2</article>
    <article>11</article>
  </main>
  <footer>
    <p>Copyright 2018</p>
  </footer>

</code>

0.1VWのグリッドギャップを使用し、repeat(auto-fill, minmax(12rem, 1fr));関数を使用して列と行を定義します。 auto-fillオプションは、できるだけ多くの列または行で空きスペースを埋めようとし、必要に応じて暗黙の列または行を作成します。利用可能な列または行を使用可能なスペースに入れたい場合は、auto-fitを使用する必要があります。 auto-fillとauto-fitの違いについて良い説明を読んでください。

これは、結果のスクリーンショットです：

Easy and Responsive Modern CSS Grid Layout

gridgrid-column、grid-row、spanキーワード

を使用します

CSSグリッドは、grid-columnおよびgrid-rowを提供します。これにより、グリッドラインを使用して親グリッド内のグリッドアイテムを見つけることができます。これらは、次の特性の略語です

：グリッド行のグリッドアイテムの開始位置を指定grid-row-start
：グリッド行のグリッドアイテムのエンド位置を指定grid-row-end
：グリッド列のグリッドアイテムの開始位置を指定grid-column-start
：グリッド列のグリッドアイテムのエンド位置を指定grid-column-end

キーワードを使用して、スパンする列または行の数を指定することもできます。 span

メインエリアの2番目の子要素を4つの列と2つの行に及ぼし、2番目の列と1行目（デフォルトの位置）から配置しましょう。

これは結果のスクリーンショットです：

<code class="language-css">body {
  background: #12458c;
  margin: 0rem;
  padding: 0px;
  font-family: -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
            "Fira Sans", "Droid Sans", "Helvetica Neue",
            sans-serif;
}

header {
  text-transform: uppercase;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #fff;
  border-style: solid;
  border-width: 2px;
}

aside {
  color: #fff;
  border-width:2px;
  border-style: solid;
  float: left;
  width: 6.3rem;
}

footer {
  color: #fff;
  border-width:2px;
  border-style: solid;
  clear: both;
}

main {
  float: right;
  width: calc(100% - 7.2rem);
  padding: 5px;
  background: hsl(240, 100%, 50%);
}

main > article {
  background: hsl(240, 100%, 50%);
  background-image: url('https://source.unsplash.com/daily');
  color: hsl(240, 0%, 100%);
  border-width: 5px;
}</code>

グリッドアライメントユーティリティを使用して Easy and Responsive Modern CSS Grid Layout

タイトル、サイドバーとフッター、および

要素の数字にテキストを集中させたいと思います。

CSSグリッドは、グリッドアイテムの整列と調整に使用できる6つのプロパティを提供します<article></article>、

、

、justify-items、align-items、justify-content、align-content、justify-self、align-selfを提供します。。実際、それらはCSSボックスアライメントモジュールの一部です。

header、aside、article、footerのセレクターで以下を追加します：

<code class="language-css">body {
  /*...*/
  display: grid;
  grid-gap: 0.1vw;
  grid-template-columns: 6.5rem 1fr;
  grid-template-rows: 6rem 1fr 3rem;
  grid-template-areas: "header   header"
                       "sidebar content"
                       "footer footer";  
}</code>

justify-items行軸または水平方向に沿ってグリッドアイテムを調整するために使用されます。
align-items列軸または垂直方向に沿ってグリッド項目を調整します。それらはすべて、start、end、center、およびstretch値を取ることができます。

これは、センタリング要素の後のスクリーンショットです：

Easy and Responsive Modern CSS Grid Layout

小さなデバイスでグリッドレイアウトを再構築します

デモレイアウトは中程度および大規模なスクリーンに便利ですが、小さな画面デバイス用のページを構築するための最良の方法ではない場合があります。 CSSグリッドを使用すると、このレイアウト構造を簡単に変更して、グリッド領域を再定義してメディアクエリを使用することにより、小さなデバイスで線形化できます。

ここにコードを追加する前のスクリーンショットがあります。小さなデバイスのレイアウトを再構築します。

Easy and Responsive Modern CSS Grid Layout

さて、次のCSSコードを追加します：

575ピクセル未満の幅があるデバイスでは、レイアウトが線形になります。

<code class="language-html"><!DOCTYPE html>


  <title>CSS Grid Layout Example</title>
  <link rel="stylesheet" href="style.css">


  <header>
    <h2>CSS Grid Layout Example</h2>
  </header>
  <aside class="sidebar">
    <p>Sidebar</p>
  </aside>
  <main>
    <article>1</article>
    <article>2</article>
    <article>11</article>
  </main>
  <footer>
    <p>Copyright 2018</p>
  </footer>

</code>

サイドバーの幅は使用可能な幅を埋めないことに注意してください。これはフォールバックコードによって引き起こされるため、グリッド対応のブラウザで Easy and Responsive Modern CSS Grid Layout オーバーライド

を使用する必要があります

width: auto;これは、最終結果のスクリーンショットです：width: 6.3rem;

<code class="language-css">body {
  background: #12458c;
  margin: 0rem;
  padding: 0px;
  font-family: -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
            "Fira Sans", "Droid Sans", "Helvetica Neue",
            sans-serif;
}

header {
  text-transform: uppercase;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #fff;
  border-style: solid;
  border-width: 2px;
}

aside {
  color: #fff;
  border-width:2px;
  border-style: solid;
  float: left;
  width: 6.3rem;
}

footer {
  color: #fff;
  border-width:2px;
  border-style: solid;
  clear: both;
}

main {
  float: right;
  width: calc(100% - 7.2rem);
  padding: 5px;
  background: hsl(240, 100%, 50%);
}

main > article {
  background: hsl(240, 100%, 50%);
  background-image: url('https://source.unsplash.com/daily');
  color: hsl(240, 0%, 100%);
  border-width: 5px;
}</code>

この記事の冒頭に表示されているCodepenに最終コードを見つけるか、Codepen：

Codepenリンク Easy and Responsive Modern CSS Grid Layout

に直接アクセスできます。

結論

このチュートリアルでは、CSSグリッドを使用してレスポンシブデモレイアウトを作成しました。古いブラウザーにフォールバックコードを使用し、CSSグリッドのステップバイステップの追加、小さなデバイスのレイアウトの再構築、およびAlignment属性センタリング要素を使用することを実証します。

簡単で応答性の高い最新のCSSグリッドレイアウトについてのfaq

CSSグリッドとFlexBoxの違いは何ですか？

CSSグリッドとフレックスボックスはどちらもCSSの強力なレイアウトシステムです。場合によっては交換可能に使用できますが、それぞれに独自の利点があります。 FlexBoxは、列または行に沿ってアイテムを割り当てるのに特に適した1次元レイアウトモデルです。一方、CSSグリッドは、列と列の要素を同時に配置するのに理想的な2次元レイアウトシステムです。複雑なWebレイアウトを作成するのに最適です。

CSSグリッドレイアウトを応答する方法は？

CSSグリッドにより、メディアクエリなしでレスポンシブレイアウトを簡単に作成できます。グリッドコンテナ内の使用可能なスペースの一部を表す

ユニットを使用できます。たとえば、3つの列のモノスペースが必要な場合は、

を使用できます。列は、画面に合うように自動的にサイズ変更されます。

CSSグリッドとフレックスボックスを一緒に使用できますか？

frはい、CSSグリッドとフレックスボックスをレイアウトに一緒に使用できます。 CSSグリッドを使用して全体のページレイアウトを作成し、FlexBoxを使用して個々のコンポーネントまたはグリッドセル内のパーツをレイアウトできます。この組み合わせにより、レイアウトを高度に柔軟に制御できます。 grid-template-columns: 1fr 1fr 1fr

CSSグリッドにアイテムを揃える方法は？

cssグリッドは、justify-items、align-items、justify-self、align-selfなどのアイテムを調整するためのいくつかのプロパティを提供します。これらのプロパティを使用して、行軸（align）または列軸（align）に沿ってアイテムを並べることができます。たとえば、justify-items: centerは、線軸に沿ってアイテムを中央に配置します。

グリッドプロジェクト間でギャップを作成する方法は？

grid-gapプロパティを使用して、グリッドアイテム間にギャップを作成できます。このプロパティは、grid-row-gapおよびgrid-column-gapの略語です。たとえば、grid-gap: 20pxは、すべてのグリッドアイテムの間に20pxギャップを作成します。

CSSグリッドでは、

`auto-fill`および`auto-fit`キーワードはどのように機能しますか？

auto-fillおよびauto-fitキーワードは、grid-template-columnsプロパティとgrid-template-rowsプロパティの関数で使用されます。 repeat()できるだけ多くのアイテムを使用して行または列を埋め、アイテムが不十分な場合は空のセルを作成します。 auto-fill同様に動作しますが、空のセルを崩壊させ、アイテムを伸ばして行または列を埋めます。 auto-fit

CSSグリッドでアイテムをオーバーラップする方法は？

CSSグリッドでは、同じグリッドセルにアイテムを配置するか、複数のセルに及ぶアイテムをオーバーラップできます。

属性を使用して、オーバーラップアイテムのスタッキング順序を制御できます。 z-index

すべてのブラウザでCSSグリッドを使用できますか？

CSSグリッドは、Chrome、Firefox、Safari、Edgeなどのすべての最新のブラウザーによってサポートされています。ただし、Internet Explorerはそれをサポートしていません。 Internet Explorerをサポートする必要がある場合は、フォールバックレイアウトを使用する必要がある場合があります。

CSSグリッドでネストされたグリッドを作成する方法は？

メッシュアイテム自体をメッシュコンテナとして設定することにより、ネストされたメッシュを作成できます。グリッドプロジェクトに

を適用し、グリッドコンテナのようにグリッドレイアウトを定義してください。 display: grid

CSSグリッドのグリッドトラックのサイズを制御する方法は？

プロパティとgrid-template-rowsプロパティを使用して、グリッドトラック（行と列）のサイズを制御できます。ピクセル（PX）、パーセンテージ（％）、分数（FR）などのさまざまなユニットを使用してサイズを指定できます。 grid-template-columns

上記のコンテンツは、元のテキストを大いに書き直して洗練し、記事をより滑らかで読みやすく、元の意味を変えることなく現代のオンライン記事の執筆スタイルに沿って努力していることに注意してください。画像形式は同じままです。 CodePenリンクは、外部のWebサイトやファイルにアクセスできないため利用できません。自分で交換してください。

以上が簡単で応答性の高い最新のCSSグリッドレイアウトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 firefox css chrome safari html edge Float auto 堆选择器 display column 算法

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSでのスクロールスナップ：スクロールアクションの制御次の記事：CSSでのスクロールスナップ：スクロールアクションの制御

続きを見る

簡単で応答性の高い最新のCSSグリッドレイアウト

CSSグリッドにアイテムを揃える方法は？

グリッドプロジェクト間でギャップを作成する方法は？

auto-fillおよびauto-fitキーワードはどのように機能しますか？

関連記事

`auto-fill`および`auto-fit`キーワードはどのように機能しますか？