しゅう【Webサイト制作/改良
・コーダー】
のPortfolio Site

まずは、ゲームでgridの練習ができるサイトのリンク↓↓

Grid Garden

flexだと、flexアイテムに、具体的な幅を与えたいときは、

子要素それぞれ一個ずつに個別に、widthを指定するか、flex-basisで基準値をあてるか、、、
（widthはガッツリ固定できますが、basisはあくまで基準値なので、growやshrinkの影響を受けます）

なんですが、

gridだと、

grid-template-columns: 80px 1fr;

と、横なら横、縦なら縦の並びの要素全部まとめて指定できます。

場合によっては、

横一列だけのレイアウトでも、

flex使うよりgridで書いた方が簡単だったりします。

さらに、

grid-template-areasで、下のように書いて、

grid-area: ;の中身を変えるだけで、レスポンシブで要素の並び替えとかも簡単にできます。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3つのカラム、中央が2倍の幅 */
  grid-template-rows: auto auto auto; /* 行の高さは内容に合わせて自動調整 */
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}

.header {
  grid-area: header;
  background-color: #eee;
  padding: 1rem;
  text-align: center;
}

.sidebar {
  grid-area: sidebar;
  background-color: #ddd;
  padding: 1rem;
}

.main {
  grid-area: main;
  background-color: #ccc;
  padding: 1rem;
}

.aside {
  grid-area: aside;
  background-color: #ddd;
  padding: 1rem;
}

.footer {
  grid-area: footer;
  background-color: #eee;
  padding: 1rem;
  text-align: center;
}

ほんと、いっかい時間取って学ぶと、あとの生産性あがると思うので、おすすめです。

以下、X投稿全文コピペ↓↓

最近、アオイさんのウェビナー見直してから、
意識的に使ってるgrid…
超優秀なんですけど…

tableみたいなレイアウト、
flexでやろうとすると、flex-growは具体的なpxや%指定できないので、
個別に子要素にwidthとかgrow当てなきゃだけど、

gridだと、 grid-template-columns: 80px 1fr; の1行の記述で、
めっちゃ自由・柔軟に幅指定できる

なんか、2次元と言わず、1次元の1行のスタイル当てるのも、
場合によってはflexじゃなくて、grid選択肢に入る？？
flexでもできるけど、
なんか楽しくなってきました

できることが増えるのは、純粋に楽しい…

サイバーエージェントが運営する小学生向けプログラミングスクール
Tech Kids School【テックキッズスクール】

けっこうガチ目っぽいです↓↓

僕がWeb制作を学んだデイトラ↓↓
継続的に学習する意思があって、何でも他人任せにするようなひとでなければ、圧倒的低価格で、圧倒的実力が身に付きます