グリッドレイアウト列の最小幅を設定する方法-CSSチュートリアル-php.cn

グリッドレイアウト列の最小幅を設定する方法

不言

リリース： 2018-12-05 09:54:40

オリジナル

11957 人が閲覧しました

グリッドレイアウト列の最小幅を設定するにはどうすればよいですか?グリッドの最小列幅を設定する場合は、グリッドの列幅設定部分で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

列 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 の外側の幅は固定され、列 2 の幅は減少します。

グリッドレイアウト列の最小幅を設定する方法 #幅は 2 行目の最小幅である 160 ピクセルに縮小します。

グリッドレイアウト列の最小幅を設定する方法 #また、ウィンドウの幅を短くすると、それ以上幅を狭くすることができないため、左右のスクロールバーが表示されてしまいます。

グリッドレイアウト列の最小幅を設定する方法

以上がグリッドレイアウト列の最小幅を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。