Wie verwendet man das Essenzgitter in Antwort

Question

Das essence CSS-Framework hat eine Rasterkomponente. Ich weiß jedoch nicht, wie ich es ansprechend einsetzen soll. Zum Beispiel, wie gebe ich Optionen für das Grid, das für Telefon, Tablet und Desktop spezifisch ist?

Answer 1

die Klassen verwenden, die in der „responsive GRID“ -Abschnitt http://getessence.io/core/grid-system

Verwenden Sie die brick Klasse erklärt werden und dann eine hinzuzufügen oder viele der folgenden Klassen des Elements Breite auf verschiedenen Plattformen zu spezifizieren:

• brick-X für Desktop
• brick-X-tablet für Tabletten

• brick-X-mobile für Handys

  Wo X = 1...12

Wie im Abschnitt Eigenschaften beschrieben, die Schwellenwerte sind:

• ...mobile hat eine max-Breite 768.
• ...tablet hat eine max-Breite von 1024px

Beispiel:

<Block classes={'e-row'}> 
<Block classes={'brick brick-3 brick-6-tablet brick-12-mobile'}>brick-3 brick-6-tablet brick-12-mobile</Block> 
<Block classes={'brick brick-6 brick-6-tablet brick-12-mobile'}>brick-6 brick-6-tablet brick-12-mobile</Block> 
<Block classes={'brick brick-6 brick-12-tablet brick-12-mobile'}>brick-6 brick-12-tablet brick-12-mobile</Block> 
</Block>