CSS-Rasterfunktionen, die Sie vielleicht noch nicht kennen!

In diesem Artikel werden Ihnen die Rasterfunktionen in CSS vorgestellt: fit-content(), minmax(), repeat(). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein. Diese drei Funktionen können nur im Rasterlayout verwendet werden Werte, können ihre Funktion wörtlich erklären: „Anpassung an den Inhalt“.

<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);
  }

Effekt

Sie können sehen:

minmax()

minmax-Funktion stellt einen geschlossenen Intervallbereich [min,max] dar. Wenn der Wert kleiner oder gleich min ist, ist der Wert gleich min. Der Wert ist gleich max.

minmax empfängt die Parameter min-content und max-content. Diese beiden Parameter stellen die kürzeste und längste Inhaltslänge des Inhalts dar. Siehe den Fall unten.

    <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);
      }

Effekt

Sie können sehen, dass die minimale Inhaltsbreite des zweiten Elements das erste p-Tag im zweiten Element ist

Die maximale Inhaltsbreite des dritten Elements ist die Inhaltsbreite des dritten P-Tags

Bei Einstellung auf Minmax (100 Pixel, maximaler Inhalt) überschreitet die maximale Inhaltsbreite nicht die Breite des dritten P-Tags

Kompatibilität

repeat()

repeat-Funktion wird zum stapelweisen Verarbeiten von Rastern verwendet und empfängt 2 Parameter. Der erste Parameter stellt die Anzahl der Ausführungen dar und der zweite Parameter stellt die Länge dar. Siehe das Beispiel unten

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>

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

Auto-Fit wird ebenfalls automatisch berechnet, aber im Gegensatz zum automatischen Ausfüllen behält das automatische Anpassen die verbleibenden leeren Zellen nicht bei und füllt die verbleibenden leeren Zellen automatisch aus Zellen werden auf jede Zelle umverteilt. Siehe das Beispiel unten

    <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));

Effekt

Kompatibilität

Die neuesten Versionen der Mainstream-Browser werden grundsätzlich unterstützt, IE wird jedoch immer noch nicht unterstützt.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

! !

Das obige ist der detaillierte Inhalt vonCSS-Rasterfunktionen, die Sie vielleicht noch nicht kennen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!