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.

gwの中にg(grid unitsの略)を入れること

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>

標準の単位

• xs: 20em (320px)
• sm: 34.375em (550px)
• md: 48em (768px)
• lg: 64em (1024px)
• xl: 78.5em (1256px)
• xxl: 100em (1600px)