ブレークポイント

画面の幅に応じてウェブサイトのレイアウトが変化するポイントのことを指します。

これはレスポンシブデザインの重要な概念であり、異なるデバイス（スマートフォン、タブレット、デスクトップなど）でコンテンツが最適に表示されるようにします。

12分割グリッドシステム

SmartUXでは、ウェブページを最大で12等分のカラムに分割し、これを利用して柔軟なレイアウトを実現します。

この方法で、ウィジェットをグリッド内のカラムに配置し、異なるデバイスや画面サイズでの表示を最適化します。

xs(スマートフォン)の場合は 2,2,4,4と指定しています。

sm(タブレット)の場合は 3,3,3,3と指定していますので均等となっています。

fluidのオプションは、レイアウトの基本的なコンテナを定義するために使用されますが、それぞれ異なる振る舞いをします。

付かない場合
レスポンシブな固定幅のコンテナを提供します。これは、異なるビューポートサイズ（スマートフォン、タブレット、デスクトップなど）で異なる最大幅を持ちますが、ビューポートがこれらの幅を超えるとコンテンツはそれ以上拡大しません。

中央揃えのコンテンツエリアが生成され、画面のサイズに応じて最適な幅が自動的に設定されます。
画面幅がブレークポイントを超えると、コンテンツは中央に配置され、左右には均等な余白が生じます。

付く場合
ビューポートの全幅を使用するフル幅のコンテナを提供します。

これは、画面のサイズに関係なく、常に利用可能な最大幅を占めます。
このクラスは、コンテンツが画面の端から端まで広がるレイアウトを必要とする場合に適しています。左右の余白は基本的に存在せず、コンテンツはビューポートの幅全体を使用します。

コンテナ、行、カラムは以下の図のような関係を持ちます。