CSS 그리드(grid) 양쪽 여백 남기고 중앙정렬하는 법

body {
    text-align: center;
}

.box {
    display: inline-block;
    width: 85%; /* 이 값으로 여백 크기 조절 */
}

.wrap {
    display: grid;

그리드로 양쪽 마진값을 주는 방법도 있지만,

전체를 묶어서 폭을 조절할 수도 있다.

 

생각보다 방법은 너무 간단한데,

먼저 부모 요소에 text-align: center; 를 주고

자식에게 display: inline-block을 넣어주면

가운데 정렬이 된다.

 

이 상태에서 width값을 조절해주면 양 옆 여백값을 표현할 수 있다.

그리고 그 밑에 그리드를 쓰고싶은대로 쓰면 된다.