意外と知らないCSSグリッド機能！

この記事では、CSS のグリッド関数、fit-content()、minmax()、repeat() を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

これら 3 つの関数 はグリッド レイアウトでのみ使用できます

[推奨チュートリアル: CSS ビデオ チュートリアル 】

fit-content()

fit-content 関数はパラメータと長さの値を受け取り、その機能は文字通り「コンテンツに適応する」と説明できます。 。

<div class="fit-content-wrapper">
  <div class="fit-item item1">test1dsssss3333333 sssssssssssssss sssssssssssssssssss sssssssssssssssssss ssssssssssssssssssss 这是用了fit-content(400px)</div>
  <div class="fit-item item2">test2 这是固定宽度width：400px</div>
  <div class="fit-item item3">test3 这是fit-content(400px)</div>
</div>

  .fit-content-wrapper{
    width: 100%;
    height: 200px;
    display: grid;
    grid-template-columns: fit-content(400px) 400px fit-content(400px);
    grid-gap: 10px;
  }
  .fit-item{
    background-color: rgb(20, 106, 177);
  }

効果

#コンテンツの長さが指定された長さを超えると、テキストは自動的に折り返され、長さを超えないことがわかります。指定された長さ. 、コンテンツの長さが指定された長さより短い場合、長さは指定されたコンテンツの長さに応じて設定されます。

互換性

互換性は最新のブラウザと問題なく、主流のブラウザの新しいバージョンでも基本的に互換性があります。サポートされていますが、IE をサポートする必要があるプロジェクトには使用できません。

minmax()

minmax 関数は閉区間範囲 [min,max] を表します。値が min 以下の場合、値は等しいです。 max より大きいか等しい場合、値は max と等しくなります。

min-content, max-content

minmax 関数は、 min-content、max-content パラメータ。これら 2 つのパラメータは、コンテンツの最短の合計を表します。コンテンツの最大長。以下のケースを参照してください。

    <div class="minmax-wrapper">
      <div class="minmax-item">
        test1dsssss3333333 sssssssssssssss sssssssssssssssssss
        sssssssssssssssssss ssssssssssssssssssss
      </div>
      <div class="minmax-item">
        <p>test2222222222</p>
        <p>test 232232323233</p>
        <p>min-content采用最短的内容长度</p>
      </div>
      <div class="minmax-item">
        <p>test</p>
        <p>test 232232323233222222</p>
        <p>max-content采用最长的内容长度</p>
      </div>
    </div>

      .minmax-wrapper {
        margin-top: 100px;
        width: 100vw;
        display: grid;
        grid-gap: 10px;
        grid-template-columns:
          minmax(300px, 500px) minmax(50px, min-content)
          minmax(100px, max-content);
      }

効果

2 番目の項目の最小コンテンツ幅は、2 番目の項目の最初の p タグであることがわかります

minmax(50px,min-content) に設定すると、最大列幅が最初の p タグのコンテンツ幅を超えることができないことを意味します。

3 番目の項目の最大コンテンツ幅は 3 番目の p タグのコンテンツ幅です

minmax(100px,max-content) に設定した場合、コンテンツの最大幅は 3 番目の p タグの幅を超えません。

互換性

fit-content 関数を使用すると同じです, IE はサポートしていませんが、主流の最新ブラウザーは十分にサポートされています。

repeat()

repeat 関数はグリッドをバッチで処理するために使用され、2 つのパラメーターを受け取ります。最初のパラメーターは実行回数を示し、2 番目のパラメーターは示します長さ。以下の例を参照してください。

    <div class="repeat-wrapper">
      <div class="repeat-item">test1 3</div>
      <div class="repeat-item">test2 23</div>
      <div class="repeat-item">test3 444</div>
    </div>

      .repeat-wrapper {
        margin-top: 100px;
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-gap: 10px;
      }

Effect

grid-template-columns:repeat(3, 100px) は、grid-template-columns:100px 100px と同等です。 100px ;

auto-fill,auto-fit

特定の回数を指定することに加えて、repeat は次のパラメータ auto-fill、auto-fit も受け取ります。 、これら 2 つのパラメーターの概念について説明します。

auto-fill

auto-fill は、ブラウザがプロジェクトに基づいて回数を自動的に入力することを意味します。コンテナーの幅が非常に広い場合、残りのグリッドの幅が自動的に予約されます。グリッド コンテナーのサイズが明確であるか、関連する軸上の最大サイズがある場合、繰り返し回数は、グリッドがグリッド コンテナーをオーバーフローさせない最大の正の整数になります。

    <div class="repeat-wrapper">
      <div class="repeat-item">test1 3</div>
      <div class="repeat-item">test2 23</div>
      <div class="repeat-item">test3 444</div>
      <div class="repeat-item">test3 4444</div>
      <div class="repeat-item">test3 444</div>
      <div class="repeat-item">test3 444</div>
    </div>

grid-template-columns: repeat(auto-fill, minmax(100px,1fr));

Effect

#auto-fit

auto-fit も自動的に計算されますが、自動入力とは異なり、自動調整は残りの空のセルを保持しませんが、自動入力の残りの空のセルを各セルに再分配します。以下の例を参照してください。

    <div class="repeat-wrapper">
      <div class="repeat-item">test1 3</div>
      <div class="repeat-item">test2 23</div>
      <div class="repeat-item">test3 444</div>
      <div class="repeat-item">test3 4444</div>
      <div class="repeat-item">test3 444</div>
      <div class="repeat-item">test3 444</div>
    </div>

grid-template-columns: repeat(auto-fit, minmax(100px,1fr));

効果

互換性

主流ブラウザの最新バージョンは基本的にサポートされていますが、IEはまだサポートされていません。

概要

これら 3 つのグリッド関数は、グリッド レイアウトを大幅に強化します。これまであまりグリッド レイアウトを使用したことがありませんでしたが、今日は関数を読んだ後、これら 3 つを学習しますグリッド レイアウトは他のレイアウトに比べて非常に便利であることがわかり、後で自分の小さなプロジェクトで使用してみることができます。

プログラミング関連の知識について詳しくは、

プログラミング ビデオ

をご覧ください。 ！

以上が意外と知らないCSSグリッド機能！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。