개발(Web)/Web

[CSS] Grid Item 정렬하기

shinyelee 2022. 1. 21. 12:57

Making Layouts - CSS Grid

Grid Item 정렬하기

justify-self

왼쪽부터 차례대로 stretch(기본값), start, center, end 적용.
이 외에도 여러 속성이 있다.

align-self

왼쪽부터 차례대로 stretch(기본값), start, center, end 적용.
이 외에도 여러 속성이 있다.

place-self

align-self와 justify-self를 합치면 place-self가 된다.
자세한 설명은 주석에 있음.


-content, -items, -self 비교하기

align-content, justify-content, place-content는 grid를 재배열한다(grid container 단위로 움직임).
align-items, justify-items, place-items는 grid 내 item'들'을 재배열한다(grid item'들'을 전부 움직임).
align-self, justify-self, place-self는 grid 내 item '하나'를 재배열한다(grid item '한 개'씩 움직임).
움직이는 단위가 달라서 코드 작성 위치도 다르다.


참고

 

justify-self - CSS: Cascading Style Sheets | MDN

The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis.

developer.mozilla.org

 

align-self - CSS: Cascading Style Sheets | MDN

The align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.

developer.mozilla.org

 

place-self - CSS: Cascading Style Sheets | MDN

The place-self CSS shorthand property allows you to align an individual item in both the block and inline directions at once (i.e. the align-self and justify-self properties) in a relevant layout system such as Grid or Flexbox. If the second value is not p

developer.mozilla.org

반응형

'개발(Web) > Web' 카테고리의 다른 글

[CSS] reset.css  (0) 2022.01.23
[CSS] Grid 자동정렬  (0) 2022.01.22
[CSS] Grid Container 정렬하기  (0) 2022.01.20
[CSS] Grid Items 정렬하기  (0) 2022.01.19
[CSS] Grid Template  (0) 2022.01.18