最近のレイアウトについて

flex と grid

レイアウトは一次元であればフレックスボックス、2 次元であればグリッドレイアウトを用いることが主流です。

マージンによらないレイアウト

フレックスやグリッドレイアウトでは、小要素のボックスたちの配置をコントロールします。そうすると、小要素のボックスの大きさやパディング（ボックス内のインライン要素の余白）は必要ですが、ボックス間のマージンは使わないことが多くなります。

Flexbox でのボックス間のスペースを調整するプロパティ

アイテム間のスペースを均等に分配するためには、justify-content や align-items などのプロパティを使用する方が一般的です。

Grid でのボックス間のスペースを調整するプロパティ

gap,column-gap,row-gap プロパティを使用してアイテム間のスペースを均等に設定する方が一般的です。

flex と grid の併用

grid レイアウトでヘッダー、フッダー、サイドバー、コンテンツなどを配置します。 flex レイアウトで、ヘッダー内のボタンの配置や、コンテンツ内でのアイコン、カードの配置を実装します。 アイコン、カードの配置については、grid（grid-auto-rows:カード高さ）でも実装することがあります。

要素の入れ子（ネスト）が深くなることについて

正しい構造を維持してください。グリッドレイアウトのアイテムの一つとして、フレックスレイアウトのコンテナを配置し、 フレックスレイアウトのアイテムとしてテキストボックスを置くなどすると、要素の入れ子が深くなります。 これを解決するために、コンポーネントという概念を取り入れたフレームワークが多数あります。 Astro や React ベースのフレームワークです。

代替ボックスモデルの推奨

CSS ライブラリを用いず、オリジナルの CSS を記載していく場合は、下記のように代替ボックスモデルとデフォルトのパディングを ０で上書きし、マージンを使用しないことを強くお勧めします。

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
span {
  display: inline;
}