ホームページ > 記事 > ウェブフロントエンド > グリッドレイアウト列の最小幅を設定する方法
グリッドレイアウト列の最小幅を設定する方法
- 不言オリジナル
- 2018-11-29 14:00:2111902ブラウズ
グリッド レイアウト列の最小幅を設定するにはどうすればよいですか?グリッドの最小列幅を設定する場合は、グリッドの列幅設定部分でminmax()関数を使用します。具体的な内容を見てみましょう。
まず minmax() 関数の形式を見てみましょう
minmax（最小宽度，最大宽度）
コード例
次のコードでは、グリッドの2 行目の幅は、最大幅 1fr、最小幅 320 ピクセルで指定されます。
.container {
display: grid;
grid-template-columns: 240px minmax(320px, 1fr) 200px;
grid-template-rows: 120px auto 120px;
}具体的な例を見てみましょう
コードは次のとおりです
次の CSS ファイルと HTML ファイルを作成します。
CSS コード:
grid-column-minimum-width.css
.Container {
display: grid;
grid-template-columns: 160px minmax(160px, 1fr) 160px 160px;
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: 1 / 2;
grid-row: 2 / 3;
background-color: #7ee68d;
}
.GridItem6 {
grid-column: 2 / 3;
grid-row: 2 / 3;
background-color: #7ee6e2;
}
.GridItem7 {
grid-column: 3 / 4;
grid-row: 2 / 3;
background-color: #95a7f5
}
.GridItem8 {
grid-column: 4 / 5;
grid-row: 2 / 3;
background-color: #d095f5;
}HTML コード:
grid-column-minimum-width.html
<!DOCTYPE html><html><head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="grid-column-minimum-width.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>
</body>
</html>注:
グリッド列の幅は、CSS ファイルの Container クラスの Grid-template-columns によって設定されます。
4つの値が記述されているため、グリッドは4列になります。左から以下の値となります。
160px
minmax (160 px, 1 fr)
160px
160px
列 2 A を除くすべてを設定します160 ピクセルの固定値は固定幅です。 2 番目の列は minmax (160 ピクセル、1 fr)、最大列幅は 1 fr、最小列幅は 160 ピクセルです。 1 fr を指定しているため、キューの幅はフレームの幅まで広がります。
以下の設定により、グリッド枠はウィンドウ幅に合わせて1列目、3列目、4列目が160ピクセル幅で表示され、2列目は縮小可能となります。
grid-template-columns: 160px minmax(160px, 1fr) 160px 160px;
結果の表示
Webブラウザを使用して上記のHTMLファイルを表示します。以下のような効果が表示されます。
#幅は 2 行目の最小幅である 160 ピクセルに縮小します。
#また、ウィンドウの幅を短くすると、それ以上幅を狭くすることができないため、左右のスクロールバーが表示されてしまいます。
以上がグリッドレイアウト列の最小幅を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。