[CSS] display: grid 사용시 가운데 정렬하는 방법

적용 환경 : Next.js

 

Array에 있는 값을 일정하게 배열을 하고 싶어서 grid라는 것을 사용해 봤는데 안에 있는 아이템들이 정렬이 안되어서 알아보게 되었다.

display:grid; 와 함께 place-items: center; 를 같이 사용해 해결 할 수 있었다.

  place-items: center;
  display: grid;

 

적용한 부분

<div
    style={{
    display: "grid",
    gridTemplateRows: "1fr ",
    gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr 1fr",
    placeItems: 'center'
    }}
>
            {numbers.map((line) => {
                    return (
                            <>
                            <CheckCard
                                data={line}
                                checkedItems={checkedItems}
                                checkedItemsHandler={checkedItemsHandler}/>

                                </>
                            )
                    })}
</div>

웹 프론트 어렵다 ㅜ _-..(삽질 중)