Skyline grid system
1.Grid layout is achieved by using a wrapping div called a 'grid-wrapper', and shortened to the classname .gw.
グリッドレイアウトは.gwで囲むこと ※gwは 'grid-wrapper'の略
2.Within the grid-wrapper, grid units are added, and shortened to the classname .g.
3.These grid units then have responsive classnames added to them, which specify their widths at different viewports.
4.Responsive width classes start with a two-letter prefix (xs, sm, md, lg, xl) and follow with the width, written in plain ol' English (one-half, two-thirds, seven-elevenths, etc.).
<div class="gw"> <div class="g sm-one-half md-one-third lg-one-sixth xl-one-twelfth"><div class="gx"></div></div> </div>