Grid System - Webの勉強

画面拡縮にGrid Systemが使えないかを考えました。

やりたいことは、画面のサイズにあわせて、ボタンといった中身の要素を拡縮します。

Grid Systemのは、画面を12や24といった分割をあらかじめさせておくことで、 class="col span_4"・class="col span_8"とCSSをあてることで、画面に対する要素の配置やサイズを楽に設定することができます。

横一列を、12分割。メディアクエリを使って,768px以上の幅があれば、要素は横に並べ、768pxをしたまわる小さい画面だと縦一列に並びます。

@media ( min-width : 768px ) {
{
    .span_1 { width: 8.33333333333%; }
    .span_2 { width: 16.6666666667%; }
    .span_3 { width: 25%; }
    .span_4 { width: 33.3333333333%; }
    .span_5 { width: 41.6666666667%; }
    .span_6 { width: 50%; }
    .span_7 { width: 58.3333333333%; }
    .span_8 { width: 66.6666666667%; }
    .span_9 { width: 75%; }
    .span_10 { width: 83.3333333333%; }
    .span_11 { width: 91.6666666667%; }
    .span_12 { width: 100%; }
}

サンプルコードをみると、要素自体のサイズというよりは、画面分割に使用するのでしょうか。。

「スマートフォンといった画面が小さい時に、要素のサイズはそのままに、横に並べた要素を縦に並べなおす」時に利用します。

サンプルリンク先
[codepen_embed グリッド [/codepen_embed]

上記コードに、試しに4/8に分割し、それぞれ中にdiv要素を追加してみましたが(samplebox1,samplebox2)、幅が768px以上あっても縦に並びます。。インラインの要素しか中に配置できないのでしょうか。

参考サイト超シンプルで簡単なフレームワーク「Responsive Grid System」でレスポンシブWEBサイトをつくろう（前編：導入編） | HTML5でサイトをつくろう