[트러블슈팅] 7. HTML 공백 배치

Solution

1. GridLayout 사용 시
1. 블럭을 3개 만듬 (왼쪽 공백, content, 오른쪽 공백)
2. grid-template-columns 에서 content의 사이즈를 정하고 나머지는 1fr or auto 설정

2. Flexbox 사용 시
1. 내용 블럭만 생성
2. 부모 박스의 justify-content: center 설정
3. 내용 블럭의 크기 설정

.container {
            display: grid;
            grid-template-columns: 1fr 56% 1fr;
            background-color: white;
            padding: 10px;
        }

.box-all {
            display: flex;
            justify-content: center;
        }

        .box-inner {
            width: 70%;
            padding: 10px 30px;
            background-color: rgb(236, 236, 236);
        }