10 種類のモダンなレイアウトを実現するための CSS コード

<div class="親青">
  <div class="box coral" コンテンツ編集可能>
    :)
  </div>

.ex1 .親{
    表示: グリッド;
    アイテムを配置: 中央;
  } 

<div class="親白">
    <div class="box green">1</div>
    <div class="box green">2</div>
    <div class="box green">3</div>
  </div>

.ex2 .親{
    ディスプレイ: フレックス;
    flex-wrap: ラップ;
    コンテンツの中央揃え: 中央;
  }

  .ex2 .ボックス {
    flex: 1 1 150px; /* flex-grow: 1 は、自動的に最大幅まで拡張することを意味します*/
    flex: 0 1 150px; /* 伸縮なし: */
    マージン: 5px;
  } 

<div class="parent">
    <div class="section yellow" コンテンツ編集可能>
    最小: 150ピクセル / 最大: 25%
    </div>
    <div class="section purple" コンテンツ編集可能>
      この要素は2番目のグリッド位置（1fr）を占め、
      残りのスペースをすべて占有します。
    </div>
  </div>

.ex3 .親{
    表示: グリッド;
    グリッドテンプレート列: 最小最大(150px, 25%) 1fr;
  } 

<div class="parent">
    <header class="blue section" contenteditable>ヘッダー</header>
    <main class="coral section" contenteditable>メイン</main>
    <footer class="purple section" contenteditable>フッターコンテンツ</footer>
  </div>

.ex4 .親{
    表示: グリッド;
    グリッドテンプレート行: 自動 1fr 自動;
  } 

<div class="parent">
    <header class="pink section">ヘッダー</header>
    <div class="left-side blue section" contenteditable>左サイドバー</div>
    <main class="section coral" contenteditable> メインコンテンツ</main>
    <div class="right-side yellow section" contenteditable>右サイドバー</div>
    <footer class="green section">フッター</footer>
  </div>

.ex5 .親{
    表示: グリッド;
    グリッドテンプレート: auto 1fr auto / auto 1fr auto;
  }
  
  .ex5 ヘッダー {
    パディング: 2rem;
    グリッド列: 1 / 4;
  }

  .ex5 .左側 {
    グリッド列: 1 / 2;
  }

  .ex5 メイン {
    グリッド列: 2 / 3;
  }

  .ex5 .右側 {
    グリッド列: 3 / 4;
  }

  .ex5 フッター {
    グリッド列: 1 / 4;
  } 

.ex7 .親{
    表示: グリッド;
    グリッドギャップ: 1rem;
    グリッドテンプレート列: repeat(auto-fit, minmax(150px, 1fr));
  }

<div class="親白">
    <div class="box pink">1</div>
    <div class="box purple">2</div>
    <div class="box blue">3</div>
    <div class="box green">4</div>
  </div>

<div class="親白">
    <div class="カード 黄色">
      <h3>タイトル - カード 1</h3>
      <p contenteditable>中程度の長さの説明で、ここにさらにいくつかの単語を追加します。</p>
      <div class="ビジュアルピンク"></div>
    </div>
    <div class="カード 黄色">
      <h3>タイトル - カード 2</h3>
      <p contenteditable>長い説明。お会いできてとても嬉しいです。</p>
      <div class="ビジュアルブルー"></div>
    </div>
    <div class="カード 黄色">
      <h3>タイトル - カード 3</h3>
      <p contenteditable>短い説明。</p>
      <div class="visual green"></div>
    </div>
  </div>

.ex8 .親{
    高さ: 自動;
    表示: グリッド;
    グリッドギャップ: 1rem;
    グリッドテンプレート列: repeat(3, 1fr);
  }

  .ex8 .visual {
    高さ: 100px;
    幅: 100%;
  }

  .ex8 .カード {
    ディスプレイ: フレックス;
    flex-direction: 列;
    パディング: 1rem;
    コンテンツの両端揃え: スペースの間;
  }

  .ex8 h3 {
    マージン: 0
  } 

<div class="親白">
    <div class="カード 紫">
      <h1>タイトルをここに入力</h1>
      <div class="visual yellow"></div>
      <p>説明テキスト。Lorem ipsum dolor sit, amet consectetur adipisicing elit。Sed est error repellat veritatis。</p>
    </div>
  </div>

.ex9 .親{
    表示: グリッド;
    アイテムを配置: 中央;
  }

  .ex9 .カード {
    幅: クランプ(23ch, 50%, 46ch);
    ディスプレイ: フレックス;
    flex-direction: 列;
    パディング: 1rem;
  }

  .ex9 .visual {
      高さ: 125px;
      幅: 100%;
    } 

<div class="親白">
    <div class="カード ブルー">
      <h1>ビデオのタイトル</h1>
      <div class="visual green"></div>
      <p>説明テキスト。このデモは Chromium 84 以降で動作します。</p>
    </div>
  </div>

.ex10 .親{
    表示: グリッド;
    アイテムを配置: 中央;
  }

  .ex10 .visual {
    アスペクト比: 16/9;
  }

  .ex10 .カード {
    幅: 50%;
    ディスプレイ: フレックス;
    flex-direction: 列;
    パディング: 1rem;
  }