コンテンツを縦一列に並べる最もシンプルな構造です。スマホ表示との親和性が高く、ランディングページ(LP)などでよく使われます。
メイン記事とサイドバー(メニューや広告)を並べる、ブログやニュースサイトの定番です。
両サイドにメニューや情報を配置する構造です。情報量の多いポータルサイトや管理画面に向いています。
要素を横や縦に「並べる」のが得意な技術です。要素の幅を自動調整したり、順番を入れ替えたりするのが非常に簡単です。
CSS例: display: flex;
格子状(グリッド)に領域を区切り、「何行目の何列目に配置するか」を自由に指定できます。複雑な新聞のようなレイアウトも作れます。
CSS例: display: grid;