Implizite Gitter, wiederholbare Layoutmuster und Dangler

Dave Rupert verwendet geschickt modernes CSS, um das klassische Puzzle zu lösen: Was passiert, wenn das CSS der Komponente nicht mit dem umgehen kann, was wir zur Verfügung stellen?

Insbesondere wenn das Layout -Netz eine gleichmäßige Anzahl von Elementen erwartet, aber tatsächlich eine ungerade Anzahl von Elementen bietet. Das letzte verbleibende "hungrige" Element wird das Layout zerstören. Dies erfordert einige defensive CSS, Dave hat es getan.

Er schrieb einen kurzen Selektor mit: Has (), um das letzte Element in einem Raster mit ungeraden Zahlen von Elementen zu finden:

 <code>.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }</code>

Zersetzung wie folgt:

• Wir haben einen übergeordneten Container namens .Items.
• Wenn der Container: hat () a .Item Child Element, ist es der letzte seiner Art.
• ... und der .Item ist zufällig eine seltsame Instanz,
• ... Wählen Sie dann das erste .Item -Element dieses Typs aus und stylen Sie es!

In diesem Fall kann das letzte .Item auf die volle Breite eingestellt werden, um zu verhindern, dass Hohlräume im Layout vorhanden sind.

Wenn ... dann ... CSS hat bedingte Logikfunktionen! Derzeit sprechen wir nur über Safari TP und Edge/Chrome Canary -Unterstützung, aber das ist bereits großartig.

Es kommt vor, dass Temani AFIF kürzlich die Tipps geteilt hat, die er bei der Verwendung implizite Mesh zum Experimentieren gelernt hat. Durch die Nutzung des automatischen Platzierungsalgorithmus von CSS Grid müssen wir nicht einmal eine feste Anzahl von Spalten und Zeilen für das Netz ausdrücklich deklarieren - CSS erstellt sie bei Bedarf für uns!

Nein, Temanis Trick ist keine Alternative zu Daves "hungriger" Puzzle. Die Kombination von Temanis Ansatz zum wiederholbaren Netzlayout-Modus mit Daves defensivem CSS-Gebrauch von: Has () erhalten wir ein leistungsstarkes und komplex aussehendes Netz, das leicht und in der Lage ist, eine beliebige Anzahl von Elementen zu bearbeiten und gleichzeitig einen ausgewogenen wiederholbaren Modus beizubehalten.

Das obige ist der detaillierte Inhalt vonImplizite Gitter, wiederholbare Layoutmuster und Dangler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!