Повторные строки кода/цв с рамки CSS сетки

Question

При использовании системы сетки рамочного CSS, как и у Bootstrap или Materialize, например, я считаю себя печатая следующий HTML очень очень часто:

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

По сути мне нужно чтобы поместить один элемент, например, абзац или кнопку, в свою собственную строку на странице, и для этого мне нужно три тэга вместо одного. Это со временем создает много раздувания в моем HTML.

Я решил создать угловую директиву, чтобы сделать его одним дополнительным тегом вместо двух, но я чувствую, что это неряшливое решение. Кто-нибудь знает, как лучше решить эту проблему?

Answer 1

Один из вариантов будут создать код snippet, так что если вы печатаете, элемента она будет расширяться в полном HTML, фрагменты доступны в возвышенном тексте, атом текстового редактора.

Другой простой вариант заключается в использовании муравей, он доступен в двух упомянутых до и скобки, например:

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

Это просто Маленький пример. Посмотрите на flexbox и посмотрите, как вы можете улучшить свои rgrids.