[1分符号化]gridコンテンツクリーンアップ

gridは主にレイアウトに使用されます.
セルを横または縦に分割した後、スケールで適用します.
本当に簡単ですよね?

完全なレイアウト

.page {
    display: grid;
    grid-template-columns: 20% auto 20%;
  }
  
  header {
    grid-column: 1 / 4;
    grid-row: 1;
  }
  
  .menu {
    grid-column: 1 / 4;
    grid-row: 2;
  }

  .card-container {
    grid-column: 2;
    grid-row: 3;
  }

  .sidebar-a {
    grid-column: 1;
    grid-row: 3;
  }

  .sidebar-b {
    grid-column: 3;
    grid-row: 3;
  }

  footer {
    grid-column: 1 / 4;
    grid-row: 4;
  }

カードリスト

flexを使用する場合

メディアクエリーを使用して、幅>600 px以上の場合は、幅:50%として指定します.
width>1000 px以上の場合はwidth:33%を指定します.
width値を固定パーセントとして指定すると、幅値は変更されません.

gridを使用する場合

grid-template-columnsは、固定されたカラム数ではなくauto-fillを使用します.

grid-template-columns: repeat(auto-fill, minmax(300px, auto));

番外

ブラウザサイズスケール=>ビューポート単位(vw、vh)の使用 最小値=>calcを指定します(最小値+可変サイズ)