やったこと

先日に引き続き、MDNでCSSを学習する

グリッドレイアウトについて

グリッドとは、水平方向と垂直方向のラインを集めたもの
グリッドには通常、列（column）、行（row）、そしてそれぞれの行と列の間のギャップ（通常はガター（gutter）と呼ばれます）がある

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

上のように表記すると、200pxの列が３つ生成される

fr 単位での柔軟なグリッド

この単位は、グリッドコンテナ内の使用可能スペースの割合を表す

.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}

上のように定義すると、横幅が2:1:1の割合になる

grid-gap: 20px;を指定すると

このように列間と行間が同時に設定される
列間のギャップには grid-column-gap プロパティ、
行間のギャップには grid-row-gap プロパティを使用する

ラインベースの配置

グリッドは常にラインを持っていて、そのラインは 1 から始まり、文書の書字方向モード（Writing Mode）に関連している

header {
  grid-column: 1 / 3;
  grid-row: 1;
}
article {
  grid-column: 2;
  grid-row: 2;
}
aside {
  grid-column: 1;
  grid-row: 2;
}

Qiita記事にもっとわかりやすいGridについての説明があったのでそれをまとめる
CSS Grid Layout を極める！（基礎編）
CSS Grid Layout を極める！（場面別編）

Gridが作る構成物

• コンテナ
  • グリッド全体を囲む要素
• item
  • コンテナの子要素
• ライン
  • グリッドを分ける垂直および水平の線のこと
  • グリッドの上下左右それぞれの両端にも存在
  • ラインには、上あるいは左から1から順に正の番号が振られている
    • 下あるいは右からは-1から順に負の番号が振られている　（０という番号はない）
• トラック
  • グリッドの行および列のこと
• セル
  • 隣接する垂直および水平方向のラインが作る、アイテムを配置できる最小の単位
• エリア
  • 一つあるいは複数のセルが結合してできるセルの集まり
    

Gridでレイアウトする手順

1. コンテナとアイテムを指定する
2. 各トラックの大きさを指定する
   • grid-template-rows: 行のトラックの高さを半角スペースで区切って指定
   • grid-template-columns: 列のトラックの幅を半角スペースで区切って指定
3. アイテムを配置する
   • grid-row: アイテムが占める行のラインの番号をスラッシュ区切りで指定する
   • grid-column: アイテムが占める列のラインの番号をスラッシュ区切りで指定する
     例えば、このように アイテム を配置したい場合、
     

      #item {
       grid-row: 1 / 2;
       grid-column: 2 / 3;
      }
      // または、
      #item {
       grid-row: 1;
       grid-column: 2;
      }
     

     のように記述する。
     また、このように配置したい場合は、
     

      #item {
       grid-row: 1 / 3;
       grid-column: 3 / 4;
      }
      // または、
      #item {
       grid-row: 1 / span 2; /* ライン番号1から始めて、2つ先のラインまで伸ばす */
       grid-column: 3 / span 1; /* ライン番号3から始めて、1つ先のラインまで伸ばす */
      }
     

     のように記述する

floatについて

floatプロパティは、もともとはテキストブロック内の浮動画像のためのものでしたが、ウェブページ上に複数列レイアウトを作成するために最も一般的に使われるツールの1つになった

フロートの背景

画像の左や右を包み込むテキストにより、テキストの列内に浮かぶ画像を含む単純なレイアウトをウェブ開発者が実装できるようにするために float プロパティが導入された
しかしウェブ開発者はすぐに画像だけでなく何でも浮かべることができることに気づいたので、フロートの使用は広がった

使用

float が設定されている要素は、文書の通常のレイアウトフローから除かれ、その親コンテナの左側に固定される
通常のレイアウトフローで浮動要素の下側に来るコンテンツは、それを包み込み、浮動要素の最上部まで、その右側のスペースを埋める

後続要素の上方向への移動を止めたい場合は、それをクリアする必要がある

.cleared {
  clear: left;
}

その場合はclearプロパティに値を入れる

• left: 左に浮いている項目をクリアします。
• right: 右に浮いている項目をクリアします。
• both: 左や右に浮いている項目をどちらもクリアします。