So implementieren Sie das N-Grid-Layout in CSS

Häufige Anwendungsszenarien

Die Schnittstellen aktueller Apps sind grundsätzlich gleich und das Rasterlayout ist für jede App zu einer Notwendigkeit geworden.

Mit Rahmen, wird oft auf der Seite „Funktionsnavigation“ verwendet

Randlos, wird häufig in Homepage-Kategorien verwendet

Entwurfsziele

In der SCSS-Umgebung werden N-Gitter über Mixin implementiert und können „mit oder ohne Ränder“ und „ob jedes Gitter quadratisch ist“ unterstützen:

@include grid(3, 3, true); // 3 x 3, mit Rändern, und jedes Raster ist ein Quadrat @include grid(2, 5, false, false); // 2 x 5, ohne Ränder

Endergebnis

Tipps zum „Füllprozentsatz“

Lassen Sie mich zunächst einen kleinen Trick erklären, wie man ein Quadrat erreicht. Ich garantiere, dass Sie es verstehen werden, nachdem Sie es einmal gelesen haben. Die Schlussfolgerung lautet:
Wenn der Füllwert ein Prozentsatz ist, wird er relativ zur Breite des „übergeordneten“ Elements berechnet. Das heißt, wenn die Breite des „übergeordneten“ Elements 100 Pixel beträgt und das „untergeordnete“ Element padding-top:100% einstellt, ist padding-top des „untergeordneten“ Elements tatsächlich gleich 100 Pixel, wodurch ein Quadrat (100 x 100) entsteht. Um Störungen zu reduzieren, setzen wir die Höhe des „untergeordneten“ Elements auf 0;

Designideen (egal ob du SCSS oder weniger bist)

1. Um die horizontale/vertikale Zentrierung interner Elemente zu erleichtern, verwenden wir insgesamt ein Flex-Layout.
2. Verwenden Sie ein Quadrat, um den Platz zu füllen. Da padding-top: 100% verwendet wird, müssen wir ein separates div verwenden, um den Inhalt aufzunehmen. Ich habe es „item__content“ genannt.
3. Damit das Inhaltscontainer-Div das Quadrat ausfüllt, legen wir den Stil dafür fest: Position: absolut; oben: 0; links: 0; rechts: 0; unten: 0;;

Unser HTML sieht also folgendermaßen aus:

<!-- a-grid ist ein flexibler Container, der es einfach macht, seinen Inhalt „horizontal/vertikal zu zentrieren“ -->
<div Klasse="a-grid">
  <!-- a-grid__item wird verwendet, um Platz für die Realisierung des Quadrats einzunehmen -->
  <div Klasse="a-grid__item">
      <!-- item__content ist der eigentliche Container für den Inhalt-->
      <div Klasse="item__content">
        Inhalt...
      </div>
  </div>
</div>

Code (scss)

Dabei werden drei Dinge erledigt:

1. Um Redundanz zu vermeiden, habe ich den gemeinsamen Teil extrahiert und ihn „.a-grid“ genannt;
2. Mixin unterstützt 4 Parameter, nämlich $row (Anzahl der Zeilen), $column (Anzahl der Spalten), $hasBorder (ob ein Rand vorhanden ist) und $isSquare (ob jeder Block garantiert ein Quadrat ist).
3. Mixin berechnet und kombiniert intern :nth-child, um den Effekt „keine äußere Grenze als Ganzes“ zu erzielen.

.ein-Raster {
    Anzeige: Flex;
    Flex-Wrap: Umwickeln;
    Breite: 100 %;

    .ein-grid__item {
        Textausrichtung: zentriert;
        Position: relativ;
        >.item__content {
            Anzeige: Flex
            Flex-Flow: Spalte;
            Elemente ausrichten: zentrieren;
            Inhalt ausrichten: zentriert;
        }
    }
}

@mixin-Raster($Zeile:3, $Spalte:3, $hasBorder:false, $isSquare:true) {
    @erweitern .a-grid;

    .ein-grid__item {

        Flex-Basis: 100 %/$Spalte;

        @if($isSquare) {
            Polsterung unten: 100 %/$Spalte;
            Höhe: 0;
        }

        >.item__content {

            @if($isSquare) {
                Position: absolut;
                oben:0;links:0;rechts:0;unten:0;
            }
        }
    }

    @für $index von 1 bis (($row - 1) * $column + 1) {
        .a-grid__item:nth-child(#{$index}) {
            @if($hasBorder) {
                Rahmen unten: 1px durchgezogen #eee;
            }
        }
    }

    @für $index von 1 bis $column {
        .a-grid__item:nth-child(#{$column}n + #{$index}) {
            @if($hasBorder) {
                Rahmen rechts: 1px durchgezogen #eee;
            }
        }
    }
}

verwenden

// Erzeuge ein quadratisches Raster mit drei Zeilen und drei Spalten. a-grid-3-3 {
    @include grid(3, 3, true);
}

// Erzeuge ein randloses Raster mit zwei Zeilen und fünf Spalten, wobei die Höhe jedes Rasters durch den Inhalt bestimmt wird. a-grid-2-5 {
    @include grid(2, 5, falsch, falsch);
}

Erinnerung: Wenn Sie ein nxm-Layout erstellen möchten, vergessen Sie nicht, nach der Verwendung von @include grid(n, m) nxm entsprechende DOM-Strukturen in HTML hinzuzufügen.

Finale

Der Inhalt ist sehr einfach gehalten und es gibt noch viele Bereiche, die optimiert werden können. Beispielsweise könnte der Rahmen in einen „Haarlinien“-Rahmen geändert werden, der auf dem realen Gerät dünner aussieht.

So, das ist fürs Erste alles. Wenn Sie eine bessere Möglichkeit zur Umsetzung kennen, hinterlassen Sie bitte eine Nachricht. Vielen Dank fürs Lesen.

Ich schreibe gerade eine CSS-Stilbibliothek. Das Ziel besteht darin, dass sie mit Applets kompatibel ist. Jeder, der interessiert ist, kann damit herumspielen. Dies ist der Quellcode, der dieser Lektion entspricht:

https://github.com/any86/3a.css/blob/develop/src/components/_grid.scss

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.