グリッドレイアウトでは、グリッドの幅を表示領域の比率またはページ全体の幅で指定できますが、グリッドの幅を比率で指定する場合は、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 サイトの他の関連記事を参照してください。
Google Fontsをタグ付けし、Goofonts.comを作成する方法Apr 12, 2025 pm 12:02 PMGoofontsは、開発者妻とデザイナーの夫によって署名されたサイドプロジェクトであり、どちらもタイポグラフィの大ファンです。 Googleにタグを付けています
時代を超越したWeb開発記事Apr 12, 2025 am 11:44 AMPavithra Kodmadは、彼らが変化したWeb開発に関する最も時代を超越した記事のいくつかであると考えていることについて、人々に推奨事項を求めました
graphQlの練習JavaScript APIでクエリをクエリしますApr 12, 2025 am 11:33 AMGraphQL APIの構築方法を学ぶことは非常に挑戦的です。ただし、10分でGraphQL APIを使用する方法を学ぶことができます！そして、それは私が完璧になったことがあります
円にタイプを設定します...オフセットパス付きApr 12, 2025 am 11:00 AMここでは、Yuanchuanからの合法的なCSSの策略があります。このCSSプロパティオフセットパスがあります。むかしむかし、それはモーションパスと呼ばれ、その後改名されました。私
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
