グリッドレイアウトでは、グリッドの幅はページ全体の面積と幅の比率として指定されます。
グリッドレイアウトでは、グリッドの幅を表示領域の比率またはページ全体の幅で指定できますが、グリッドの幅を比率で指定する場合は、frを使用する必要があります。以下、具体的な内容を見ていきましょう。
# #次の HTML ファイルを作成します
SimpleGridFr.css
.Container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 120px 120px;
border: solid #ff6a00 1px;
}
.GridItem1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
background-color: #ff9c9c;
}
.GridItem2 {
grid-column: 2 / 3;
grid-row: 1 / 2;
background-color: #ffcb70;
}
.GridItem3 {
grid-column: 3 / 4;
grid-row: 1 / 2;
background-color: #fffd70;
}
.GridItem4 {
grid-column: 4 / 5;
grid-row: 1 / 2;
background-color: #b0ff70;
}
.GridItem5 {
grid-column: 5 / 6;
grid-row: 1 / 2;
background-color: #7ee68d;
}
.GridItem6 {
grid-column: 1 / 2;
grid-row: 2 / 3;
background-color: #7ee6e2;
}
.GridItem7 {
grid-column: 2 / 3;
grid-row: 2 / 3;
background-color: #95a7f5
}
.GridItem8 {
grid-column: 3 / 4;
grid-row: 2 / 3;
background-color: #d095f5;
}
.GridItem9 {
grid-column: 4 / 5;
grid-row: 2 / 3;
background-color: #f5aee4;
}
.GridItem10 {
grid-column: 5 / 6;
grid-row: 2 / 3;
background-color: #edc3a4;
}SimpleGridFr.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" href="SimpleGridFr.css"/>
</head>
<body>
<div class="Container">
<div class="GridItem1">項目1</div>
<div class="GridItem2">項目2</div>
<div class="GridItem3">項目3</div>
<div class="GridItem4">項目4</div>
<div class="GridItem5">項目5</div>
<div class="GridItem6">項目6</div>
<div class="GridItem7">項目7</div>
<div class="GridItem8">項目8</div>
<div class="GridItem9">項目9</div>
<div class="GridItem10">項目10</div>
</div>
</body>
</html>説明:
この例では、CSS の説明Containerクラスの内容は以下のようになります。グリッドの列 (水平) を 5 列、行 (垂直) を 2 行に設定します。
grid-template-columns の値は 1fr に設定されており、この設定によりグリッドの幅が比例して表示されます。この例では、1frの設定が5つあるため、1frの幅は表示領域(ページ全体)の幅の1/5で表示されます。.Container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 120px 120px;
border: solid #ff6a00 1px;
}HTMLページの「GridItem 1」～「Griditem 10」のdivボックスをグリッドの各セルに割り当てます。
結果の表示
上記の HTML ページを実行します。以下のような効果が表示されます。 5つのグリッド幅が等間隔に表示されます。
ウィンドウの幅を縮小すると、各グリッドの単位フレームの幅が減少します。
ウィンドウをさらに縮小すると、各グリッドの単位フレームの幅は縮小し続けます
最後に、以下のコードの値をいくつか変更してどうなるかを見てみましょう
grid-tempat-COumns 属性に 1 fr 以外の値が指定されている場合、Continer クラスの設定を以下のように変更することを確認します。
以下の説明では、1列目、3列目、5列目は1fr、2列目は3fr、4列目は2frとして説明します。全体の合計は 8 fr であるため、列 1、3、および 5 のセルの幅は表示領域の幅 (ウィンドウ幅) の 8 分の 1 になります。同様に、2 番目の列の幅は 3/8 で、4 番目の列の幅は 1/4 (2/8) です。
.Container {
display: grid;
grid-template-columns: 1fr 3fr 1fr 2fr 1fr;
grid-template-rows: 120px 120px;
border: solid #ff6a00 1px;
}変更された HTML ページを表示します。以下のような効果が表示されます。
#ウィンドウの幅を縮小します。ウィンドウの幅が縮小すると、グリッドの幅も縮小します。グリッドセルの幅比を維持しながら幅が縮小されます。 
以上がグリッドレイアウトでは、グリッドの幅はページ全体の面積と幅の比率として指定されます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7328
9
1626
14
1350
46
1262
25
1209
29
CSS Flex レイアウトを使用して不規則なグリッド レイアウトを実装する方法
Sep 28, 2023 pm 09:49 PM
CSSFlex エラスティック レイアウトを使用して不規則なグリッド レイアウトを実装する方法。Web デザインでは、ページのセグメント化とレイアウトを実現するためにグリッド レイアウトを使用する必要があることがよくあります。通常、グリッド レイアウトは規則的で、各グリッドは同じサイズです。場合によっては、実装が必要になる場合があります。不規則なグリッドレイアウト。 CSSFlex エラスティック レイアウトは、不規則なグリッド レイアウトを含むさまざまなグリッド レイアウトを簡単に実装できる強力なレイアウト方法です。以下では、CSSFlex エラスティック レイアウトを使用してさまざまな方法を実現する方法を紹介します。
CSS レイアウト ガイド: グリッド レイアウトを実装するためのベスト プラクティス
Oct 26, 2023 am 10:00 AM
CSS レイアウト ガイド: グリッド レイアウトを実装するためのベスト プラクティス はじめに: 最新の Web デザインでは、グリッド レイアウトは非常に一般的なレイアウト方法になっています。これは、ページ構造をより適切に整理し、より階層的で読みやすくするのに役立ちます。この記事では、グリッド レイアウトのベスト プラクティスと、グリッド レイアウトをより適切に実装するのに役立つ具体的なコード例を紹介します。 1. グリッドレイアウトとは何ですか?グリッド レイアウトとは、ページの要素を特定のルールに従って簡単に配置できるように、ページをグリッドによって複数の列と行に分割することを指します。グリッドレイアウト
HTML を使用して基本的なグリッド レイアウト ページを作成する方法
Oct 21, 2023 am 10:37 AM
HTML を使用して基本的なグリッド レイアウト ページを作成する方法 グリッド レイアウトは、ページをグリッド状に複数の領域に分割し、領域のサイズや位置を柔軟に調整できる、一般的で実用的なページ レイアウト方法です。この記事では、HTML を使用して基本的なグリッド レイアウト ページを作成する方法を紹介し、参考となる具体的なコード例を示します。まず、HTML ファイルにコンテナ要素を設定する必要があります。これは、グリッド レイアウトのルート要素として機能します。これは、div または sect にすることができます。
CSS グリッド レイアウト: グリッド レイアウトを使用して複雑な Web ページ レイアウトを作成する
Nov 18, 2023 am 10:35 AM
CSS グリッド レイアウト: グリッド レイアウトを使用して複雑な Web ページ レイアウトを作成するには、特定のコード サンプルが必要です 最新の Web デザインでは、Web ページ レイアウトが重要な役割を果たします。複雑な Web レイアウトを作成するには、デザイナーと開発者は優れたツールとテクニックを使用する必要があります。その中でも、CSS グリッド レイアウトは、複雑な Web ページ レイアウトを簡単に作成できる強力で柔軟な方法です。この記事では、CSS グリッド レイアウトの使用方法を詳しく紹介し、いくつかの実践的なコード例を示します。 CSS グリッド レイアウトは新しいレイアウト モードです。
HTML と CSS を使用してグリッド リスト レイアウトを実装する方法
Oct 20, 2023 pm 05:45 PM
HTML と CSS を使用してグリッド リスト レイアウトを実装する方法 最新の Web デザインでは、グリッド リスト レイアウトは非常に一般的なレイアウト パターンになっています。美しい Web ページを簡単に作成し、Web ページ内にコンテンツを明確に配置するのに役立ちます。この記事では、HTML と CSS を使用してグリッド リスト レイアウトを実装する方法を紹介し、具体的なコード例を示します。まず、HTML を使用して Web ページのインフラストラクチャを構築する必要があります。簡単な例を次に示します: <!DOCTYPEhtml><
HTML と CSS を使用してレスポンシブな画像グリッド レイアウトを作成する方法
Oct 27, 2023 am 10:26 AM
HTML と CSS を使用してレスポンシブな画像グリッド レイアウトを作成する方法 今日のインターネット時代では、画像は Web コンテンツの重要な部分を占めています。さまざまな種類の画像を表示するには、効果的で美しいグリッド レイアウトが必要です。この記事では、HTML と CSS を使用してレスポンシブなイメージ グリッド レイアウトを作成する方法を学びます。まずはHTMLを使って基本的な構造を作成します。サンプルコードは次のとおりです: <!DOCTYPEhtml><html>
PHPで開発したグリッドレイアウトをWeChatミニプログラムに実装する方法
Jun 01, 2023 am 08:48 AM
近年、WeChatミニプログラムはモバイル端末開発における重要なツールの1つとなっており、Webバックエンド開発でよく使われる言語としてPHPも徐々にミニプログラム開発に欠かせないものになってきています。その中でもグリッドレイアウトはミニプログラムでよく使われるレイアウト方法ですが、今回はPHPを使ってWeChatミニプログラムのグリッドレイアウトを開発する実装方法を紹介します。 1. グリッド レイアウトを理解する グリッド レイアウト (GridLayout) は、行と列に基づいたレイアウト方法であり、画像、テキスト、グラフなどのさまざまな要素の配置を実現できます。
Vue を使用してグリッド レイアウト効果を実装する方法
Sep 22, 2023 am 10:24 AM
Vue を使用してグリッド レイアウト効果を実装するには、特定のコード サンプルが必要です。現代の Web 開発では、レイアウトは非常に重要な部分です。グリッドレイアウトは、Webページを美しく配置できる一般的なレイアウト方法です。人気のある JavaScript フレームワークとして、Vue はグリッド レイアウト効果を実装する便利な方法を提供します。この記事では、Vue を使用してグリッド レイアウト効果を実装する方法を紹介し、コード例を示します。 1. Vue と関連する依存ライブラリをインストールします。開始する前に、Vue と関連する依存ライブラリをインストールする必要があります。
