【CSS】grid layout -その４- justify-self, align-selfなど

programming

marginやjustify-self, align-self, place-self, justify-items, align-items, place-itemsなどを使用して、グリッドアイテムを配置。

grid

  • item1: margin-left:auto;
  • item2: margin-right:auto;
  • item3: justify-self:start;
  • item4: justify-self:end;
  • item5: justify-self:center;
  • item6: justify-self:stretch;
  • item7: align-self:start;
  • item8: align-self:end;
  • item9: align-self:stretch;
  • item10: align-self:stretch;
  • item11: place-self:center;
  • item12: place-self:start end;

justify-self

グリッドアイテムを行に沿って整列させる。一つ一つのアイテムに適用される。

  • start：セルの開始位置にアイテムを設置。
  • end：セルの終端にアイテムを設置。
  • center:セルの中心にアイテムを設置。
  • stretch：セルの幅に合わせてアイテムを設置（デフォルト）。

align-self

グリッドアイテムを列に沿って整列させる。一つ一つのアイテムに適用される。

  • start：セルの開始位置にアイテムを設置。
  • end：セルの終端にアイテムを設置。
  • center:セルの中心にアイテムを設置。
  • stretch：セルの高さに合わせてアイテムを設置（デフォルト）。

place-self

align-selfとjustify-selfの両方のプロパティを一度に設定できる。一つ一つのアイテムに適用される。

// place-selfの例
 
item1 {
    place-self:start center;
    ## 最初に align-self、次に justify-self。
}

item2 {
    place-self:center;
    ## 値が一つの場合、align-selfとjustify-selfの両方がこの値になる。
}

グリッドコンテナに対して、justify-items, align-items、place-items。

justify-itemsは、グリッドアイテムを行に沿って整列させる。コンテナ内の全てのアイテムに適用される。

align-itemsは、グリッドアイテムを列に沿って整列させる。コンテナ内の全てのアイテムに適用される。

place-itemsは、justify-itemsと align-itemsの両方のプロパティを単一の宣言で設定できる。

最初の値はalign-items、2番目の値はjustify-itemsを設定する。2番目の値が省略された場合、最初の値が両方のプロパティに割り当てられる。

justify-items: start;
  • item1
  • item2
  • item3
  • item4
justify-items: end;
  • item1
  • item2
  • item3
  • item4
justify-items: center;
  • item1
  • item2
  • item3
  • item4
justify-items: stretch;
  • item1
  • item2
  • item3
  • item4
align-items: start;
  • item1
  • item2
  • item3
  • item4
align-items: end;
  • item1
  • item2
  • item3
  • item4
align-items: center;
  • item1
  • item2
  • item3
  • item4
align-items: stretch;
  • item1
  • item2
  • item3
  • item4
place-items: start;
  • item1
  • item2
  • item3
  • item4
place-items: end;
  • item1
  • item2
  • item3
  • item4
place-items: center;
  • item1
  • item2
  • item3
  • item4
place-items: stretch;
  • item1
  • item2
  • item3
  • item4
place-items: start end;
  • item1
  • item2
  • item3
  • item4
place-items: end center;
  • item1
  • item2
  • item3
  • item4
place-items: center start;
  • item1
  • item2
  • item3
  • item4
place-items: center end;
  • item1
  • item2
  • item3
  • item4
お薦め