グリッドシステムとは何か 可変グリッドレイアウトを実現するためのBootstrapのCSSの機能 そもそもグリッドレイアウトとは Webデザインに使われるレイアウトの手法の一つ 「グリッド(grid)」とは方眼(状のもの)という意味で、グリッドレイアウトは画面やページを縦横に分断する直線で格子状に分割し、ブロックを組み合わせて各要素の大きさや配置、余白などの画面構成を決定していく手法のこと グリッドは縦を「カラム(column)」、横を「ロウ(row)」で表現する グリッドレイアウト用のテンプレートとして有名なサービスに「960 GRID GYSTEM」がある http://960.gs/ 可変グリッドレイアウトとは Webページのレイアウトは「カラム数」と「固定か可変」を組み合わせて決定していく 可変レイアウトの代表として、リキットレイアウト(Liquid Layout)とレスポンシブW
![Bootstrap3のグリッドシステムの概念を理解して使えるようになる - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/57254b3e677cbca66a4bd108cdac5919b9e827fc/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9Qm9vdHN0cmFwMyVFMyU4MSVBRSVFMyU4MiVCMCVFMyU4MyVBQSVFMyU4MyU4MyVFMyU4MyU4OSVFMyU4MiVCNyVFMyU4MiVCOSVFMyU4MyU4NiVFMyU4MyVBMCVFMyU4MSVBRSVFNiVBNiU4MiVFNSVCRiVCNSVFMyU4MiU5MiVFNyU5MCU4NiVFOCVBNyVBMyVFMyU4MSU5NyVFMyU4MSVBNiVFNCVCRCVCRiVFMyU4MSU4OCVFMyU4MiU4QiVFMyU4MiU4OCVFMyU4MSU4NiVFMyU4MSVBQiVFMyU4MSVBQSVFMyU4MiU4QiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MzgzZDYzNmU1N2U5Y2RkMDM1M2VkMGU3NjdjYTFiYTU%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDBtYXNhcnVmdXJ1eWEmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWU3ZDZiYmNiYjk0ZTQwODlmYTA5ZjBjYTAyYjUzNWRj%26blend-x%3D120%26blend-y%3D445%26blend-mode%3Dnormal%26txt64%3DaW4g44Ko44Oz44K444OL44Ki44Go5Lq655Sf44Kz44Of44Ol44OL44OG44Kj%26txt-width%3D972%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25233A3C3C%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D134%26txt-y%3D546%26s%3D1a7396057618ba3fc32976c03668a7ba)