[Part 2] 介紹 Grid 內元素屬性

justify-self / align-self

• grid container 可以透過 justify-items 和 align-items 定義 grid cell 所擺放的位置，那如果 grid cell 自己想要 overwrite justify-items 或是 align-items 可以使用 justify-self 和 align-self。

語法

justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;

justify-self 範例

CodePen 範例

• justify-self: start
  
• justify-self: end
  
• justify-self: center
  
• justify-self: stretch
  

align-self 範例

CodePen 範例

• align-self: start;
  

• align-self: end;
  

• align-self: center;
  

• align-self: stretch
  

place-self

align-self 和 justify-self 的縮寫。

語法

place-self: align-self justify-self;

範例

place-self: center start;

相等於

align-self: center;
justify-self: start;

參考資料：
CSS進階：Grid格線佈局
Basic concepts of grid layout