css grid 컨테이너 속성 중에서 flexbox와 유사한 기능의 속성들

css flex 박스에서 아이템을 옮기는 속성들을 생각해보세요.

주축 방향으로 옮기는 것은 justify-content, 교차축 방향으로 옮기는 것은 align-items 입니다. grid에서도 이와 같은 속성들이 있습니다. 하지만 차이점도 있죠. flexbox는 방향을 설정하는 것에 따라 주축이 달라지기 때문에, 당연히 그에 따라 옮기는 방향이 달라지지만 그리드에서는 justify-content는 항상 가로축으로 이동하고, align-content는 세로축으로 이동시킵니다. 또 그리드가 좀 더 세분화되어 있습니다. justify-items와 align-items 등 아이템들에게 적용되는 속성들도 있습니다.

justify-content, align-content 더 알아보기

fr과 같은 단위는 유동적입니다. 하지만 픽셀같이 고정된 단위로 아이템의 값을 주면 어떻게 될까요?

아이템들의 크기를 픽셀로 만들었습니다.

픽셀같이 고정된 값으로 아이템을 만들면 그리드 컨테이너보다 아이템들이 작게 나올 수 있습니다. 이러한 상황일 때 justify-content는 가로축으로 값을 옮기는 것입니다.

올 수 있는 값으로는 start, end, center, stretch, space-around, space-between, space-evenly 등이 있습니다.

컨텐츠를 가운데 정렬했습니다.

해당 그림에는 justify-content 값을 center로 주고, align-content 값도 center로 주었습니다.

align-content에도 start, end, center, stretch, space-around, space-between, space-evenly 값이 올 수 있습니다.

아이템들을 조정하는 justify-items와 align-items

그리드 셀이 만들어지고 일단 아이템들을 거기에 맞게 하나씩 배치해놓는다고 했었죠? 그러면 아이템들은 셀의 크기에 맞춰지게 됩니다. 기본적으로는 stretch 값이 적용되어 있는 것입니다. 그렇다면 아이템들을 조정해볼까요?

justify-items 값이 적용된 상태입니다.

아이템들이 가로 공간에 맞게 다 늘어났던 것과 달리 가운데로 모여있습니다. 해당 그림은 justify-items에 center 값이 적용한 것입니다.

값에는 start, center, end, stretch 값이 올 수 있습니다. 테스트해보세요.

justify-items 값을 다시 기본값인 stretch로 돌린 뒤 이제는 align-items를 적용시켜봤습니다.

align-items 값을 주었습니다.

세로 공간에 맞게 가득차 있던 아이템의 크기가 가운데로 모여있습니다. 해당 그림은 align-items에 값으로 center를 준 것입니다.

align-items도 start, center, end, stretch 값을 줄 수 있습니다.

두 값을 모두 center로 적용하면 아이템이 어떻게 변하나요? 한 가운데 아이템이 위치하는 것을 확인할 수 있을겁니다. 확인해보세요.

단축어 활용하기

각각 값을 주기보다는 하나의 값으로 줄 수 있습니다. place-content는 첫번째 값으로 align-content의 값을 받고, 두번째 값으로는 justify-content의 값을 받습니다. "place-content: center end;" 와 같은 형태입니다.

한개의 값만 주었을 때는 두 개 모두 주어진 값이 들어갑니다.

place-items는 첫번째 값으로 align- items의 값을 받고, 두번째 값으로 justify-content의 값을 받습니다. "place-items: center stretch;"와 같은 형태를 가집니다. 이것도 하나의 값만 주어졌을 땐 같은 값이 적용됩니다.

컨텐츠나 아이템을 옮기는 것은 플렉스박스에서도 자주 사용해보셨을 겁니다. start, end 등 값에 "flex-" 형태가 들어가지 않는다는 것만 기억해두시면 자유롭게 사용할 수 있을것입니다.