음악, 삶, 개발
CSS Grid 의 특정 item width 나 height 를 조절후 정렬하기 본문
CSS grid 를 사용할때, item 의 width 를 px 로 static 하게 조정한후 다시 수평 정렬이나 수직정렬을 하고싶을수있다.
이때 사용하는 중요한 속성이 justify-self 와 align-self 이다.
.item {
width: 100px;
height: 50px;
justify-self: center; /* 수평 정렬. width 와 연관. */
align-self: center; /* 수직 정렬 height 와 연관. */
}
꼭 width 가 특정되지않아도,
자식을 통해 설정된 width 상태에서도 justify-self 나 alight-self 를 사용할수있다.
.item {
grid-area: 1 / 1 / 2 / -1; /* width 가 1000px 이라고 가정. */
display: grid;
grid-template-columns: 150px 35px 35px 35px 35px; /* 하지만 자식의 합이 290px 뿐임. */
justify-self: center; /* 이게 없으면 왼쪽으로 붙어버림. */
}