Wiederholte Zeile/Spalte Code mit CSS Grid Framework

Question

Wenn ein CSS-Framework des Grid-System, wie das von Bootstrap oder Materialize zum Beispiel finde ich die Eingabe mir die folgende HTML sehr sehr oft:

<div class="row"> 
    <div class="col s12"> 
     <!-- Some text/ a button/something --> 
    </div> 
</div> 

Im Grunde brauche ich um ein Element, einen Absatz oder eine Schaltfläche, in eine eigene Zeile auf der Seite einzufügen, und dazu brauche ich drei Tags statt nur eines. Dies verursacht im Laufe der Zeit eine Menge Aufblähung in meinem HTML.

Ich habe überlegt, eine eckige Anweisung zu erstellen, um es zu einem zusätzlichen Tag anstelle von zwei zu machen, aber ich denke, das ist eine schlampige Lösung. Kennt jemand einen besseren Weg, um dieses Problem zu lösen?

Answer 1

Eine Möglichkeit besteht darin, einen Code zu erstellen snippet also, wenn Sie schreiben, Element es in der vollständigen HTML erweitern, Schnipsel in erhabenem Text, Atom-Text-Editor zur Verfügung steht.

Eine weitere einfache Möglichkeit, verwenden Emmet ist, ist es in den beiden vor und Klammern erwähnt zur Verfügung, wie folgt aus:

.row>.col.s12>element TAB 

Answer 2

so etwas wie dies versuchen ..

.parent { 
display: flex; 
} 

.child { 
flex: 1; /* will grow and shrink with the screen size 
min-width: 20ems ; /* optional if you want the element to not fall below a certain width 
} 

Dies ist nur ein kleines beispiel..schau in flexbox und schau dir an, wie du deine rgrids besser stylen kannst.