Gridレイアウトについて

世の中にはGridレイアウトというレイアウト方法が存在しているらしい。

MDNを見てみたがかなり便利そうだったのでこれを使ってCSSの勉強をしていきたいと考えている。

 

.wrapper {

   display: grid;

   grid-template-columns: 500px 1fr 2fr;

}

<div class="wrapper">
<div>A</div>

<div>B</div>

<div>C</div>

<div>D</div>
</div>

 

この場合3列で

500px 1fr 2fr

500pxとひも付き

 

A B C

D

と並ぶ

Gridレイアウトについて

世の中にはGridレイアウトというレイアウト方法が存在しているらしい。

MDNを見てみたがかなり便利そうだったのでこれを使ってCSSの勉強をしていきたいと考えている。

 

.wrapper {

   display: grid;

   grid-template-columns: 500px 1fr 2fr;

}

<div class="wrapper">
<div>A</div>

<div>B</div>

<div>C</div>

<div>D</div>
</div>

CSSについて

CSSをゆるふわで書いていたのでそろそろ覚えていきたいと思います。

 

とりあえず戦略としてはこんな感じで行きます。

1. 一番モダンなレイアウトを一度覚える

2. 1周間ほど使い続ける

3. 少し古いレイアウトを覚える

具体的に言うと。

Gridレイアウトが最新そうなので(観測範囲)で、これを使い続けたあとにFlexboxを1週間ほどやりたいと思います。

 

基本的に毎日CSSをに触れていきます。