前置き

floatとflexboxとgridはそれぞれ、要素を横並びにすることができるCSSのプロパティや値です。
Webページを作る上で最も大事なこととなるので、使い分けできるようにしましょう。

この記事で分かること

指定した要素を左または右に浮動させ、後ろの要素を回り込みます。
ブログなどで、文字の途中に画像を入れる時にしか今は使わないかもしれません。

指定した要素の子要素を整列させます。
子要素の配置を調整しやすいので、横並びの中でもちょっと段を変えたりなども可能です。

指定した要素の子要素をテーブル状(行・列)に配置します。
子要素の幅や高さを親要素(gridを指定している要素)で指定することができます。

ただ横並びにするだけであれば、どれを使っても問題はありませんが、
記事の最初に書いた通り、私の場合は下記のように使い分けています。

特にflexboxは、モダンなレイアウトなサイトを作る時に有効ですので、まずこれを習得したいです。