繰り返し行/ COLコード

Question

例えばBootstrapまたはMaterializeのことのように、私は自分自身が非常に非常に多くの場合、次のHTMLを入力して検索する、CSSフレームワークのグリッドシステムを使用して：基本的に私は必要

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

段落やボタンなどのアイテムをページ上の自分の行に配置するには、そのためには1つではなく3つのタグが必要です。これは時間の経過と共に私のHTMLに膨らみを作ります。

2つではなく1つの余分なタグになるように角度指示文を作成することを検討しましたが、それはちょっとした解決策だと思います。誰もがこの問題を解決する良い方法を知っていますか？あなたが入力した場合

Answer 1

1つのオプションは、それが完全なHTMLに拡大していきます要素は、スニペットは崇高なテキスト、原子のテキストエディタで利用できるので、コードsnippetを作成することになります。

別の簡単なオプションは、それはこのように、前に述べた2で利用可能とブラケットで、エメットを使用することです：

.row>.col.s12>element TAB 

Answer 2

はこのような何かを試してみてください。..

.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 
} 

これはただであります小さな例です。フレックスボックスを見て、あなたのrgridをより良くスタイルする方法を見てください。