Grid-Layout
mdui bietet ein responsives, Mobile-First 12-Spalten-Grid-System.
Verwandte Themen
Layout-Container
mdui erfordert einen .mdui-container-Container für den Seiteninhalt und das Grid-System. Wir bieten zwei Klassen für diesen Zweck an.
Die Klasse .mdui-container nimmt 92 % – 96 % der Bildschirmbreite ein, bei einer maximalen Breite von 1280px.
<body>
<div class="mdui-container">
...
</div>
</body>Die Klasse .mdui-container-fluid nimmt immer 100 % der Bildschirmbreite ein.
<body>
<div class="mdui-container-fluid">
...
</div>
</body>Basis-Grid
.mdui-row muss in einem .mdui-container oder .mdui-container-fluid enthalten sein, um die richtige Ausrichtung (Alignment) und Polsterung (Padding) zu erhalten.
.mdui-row enthält mehrere .mdui-col-xs-[1-12]-Klassen, wobei die Zahl in .mdui-col-xs-[1-12] angibt, wie viele Spalten das Element einnimmt.
Wenn eine Zeile mehr als 12 Spalten enthält, werden die überschüssigen Spalten in einer neuen Zeile angeordnet.
<div class="mdui-row">
<div class="mdui-col-xs-3">.mdui-col-xs-3</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-9">.mdui-col-xs-9</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-12">.mdui-col-xs-12</div>
</div>
Responsives Grid
.mdui-col-xs-[1-12]Gilt für alle Bildschirmgeräte, wie Smartphones, Computer usw..mdui-col-sm-[1-12]Gilt für kleine Bildschirme und größer, wie Tablets..mdui-col-md-[1-12]Gilt für mittlere Bildschirme und größer, wie Notebooks..mdui-col-lg-[1-12]Gilt für große Bildschirme und größer, wie Desktop-Computer..mdui-col-xl-[1-12]Gilt für sehr große Bildschirme, wie Fernseher.
Das Kombinieren dieser Klassen ermöglicht responsive Effekte.
Responsive Breakpoints sind wie folgt:
| class | Bereich | Gutter-Breite |
|---|---|---|
.mdui-col-xs-[1-12] | > 0px | 16px (8px links und rechts von jeder Spalte) |
.mdui-col-sm-[1-12] | > 600px | |
.mdui-col-md-[1-12] | > 1024px | |
.mdui-col-lg-[1-12] | > 1440px | |
.mdui-col-xl-[1-12] | > 1920px |
<!-- Auf sehr kleinen Bildschirmen hat die erste Spalte 100 % Breite und die zweite Spalte 50 % Breite. Auf kleinen Bildschirmen und größer hat die erste Spalte 66,6 % Breite und die zweite Spalte 33,3 % Breite. -->
<div class="mdui-row">
<div class="mdui-col-xs-12 mdui-col-sm-8">.mdui-col-xs-12<br/>.mdui-col-sm-8</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>
<!-- Auf sehr kleinen Bildschirmen hat jede Spalte 50 % Breite, auf kleinen Bildschirmen und größer jede Spalte 33,3 % Breite. -->
<div class="mdui-row">
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>
<!-- Auf allen Geräten hat jede Spalte 50 % Breite. -->
<div class="mdui-row">
<div class="mdui-col-xs-6">.mdui-col-xs-6</div>
<div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>Spaltenabstand
Standardmäßig gibt es einen Abstand von 16px zwischen den Spalten. Fügen Sie einfach die Klasse .mdui-row-gapless zu .mdui-row hinzu, um den Spaltenabstand zu entfernen.
<div class="mdui-row mdui-row-gapless">
<div class="mdui-col-xs-4">mdui-col-xs-4</div>
<div class="mdui-col-xs-4">mdui-col-xs-4</div>
<div class="mdui-col-xs-4">mdui-col-xs-4</div>
</div>Spalten-Offset
Mit .mdui-col-offset-xs-[1-12], .mdui-col-offset-sm-[1-12], .mdui-col-offset-md-[1-12], .mdui-col-offset-lg-[1-12] und .mdui-col-offset-xl-[1-12] können Spalten nach rechts verschoben werden; die Zahl gibt an, um wie viele Spalten sie nach rechts verschoben werden.
<div class="mdui-row">
<div class="mdui-col-md-4">.mdui-col-md-4</div>
<div class="mdui-col-md-4 mdui-col-offset-md-4">.mdui-col-md-4 .mdui-col-offset-md-4</div>
</div>
<div class="mdui-row">
<div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
<div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
</div>
<div class="mdui-row">
<div class="mdui-col-md-6 mdui-col-offset-md-3">.mdui-col-md-6<br/>.mdui-col-offset-md-3</div>
</div>Verschachtelte Spalten
Verschachtelung von Spalten erfolgt durch Hinzufügen von neuen .mdui-row- und .mdui-col-[*]-Elementen innerhalb bestehender Spalten. Die verschachtelte Zeile darf nicht mehr als 12 Spalten enthalten.
<div class="mdui-row">
<div class="mdui-col-xs-9">
Level 1: .col-xs-9
<div class="mdui-row">
<div class="mdui-col-xs-8 mdui-col-sm-6">Level 2: .col-xs-8 .col-sm-6</div>
<div class="mdui-col-xs-4 mdui-col-sm-6">Level 2: .col-xs-4 .col-sm-6</div>
</div>
</div>
</div>Gleichmäßig verteilte Spalten
In .mdui-row-xs-[1-12] enthaltene Elemente mit der Klasse .mdui-col werden gleichmäßig verteilt. Zum Beispiel nimmt jedes .mdui-col-Element in .mdui-row-xs-5 20 % der Breite ein.
<div class="mdui-row-xs-5">
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
</div>Das Kombinieren von .mdui-row-xs-[1-12], .mdui-row-sm-[1-12], .mdui-row-md-[1-12], .mdui-row-lg-[1-12] und .mdui-row-xl-[1-12] ermöglicht ein responsives Layout.
CSS-Klassenliste
| Klassenname | Beschreibung |
|---|---|
.mdui-container | Layout-Container mit Breitenbeschränkung |
.mdui-container-fluid | Layout-Container mit 100 % Breite |
.mdui-row | Definition einer Zeile |
.mdui-col-[xs|sm|md|lg|xl]-[1-12] | Definition einer Spalte |
.mdui-row-gapless | Spaltenabstand entfernen |
.mdui-col-offset-[xs|sm|md|lg|xl]-[1-12] | Spalten-Offset |
.mdui-row-[xs|sm|md|lg|xl]-[1-12] | Gleichmäßig verteilte Spalten |