display: grid 사용 이유!

사용이유

로그인과 회원가입 페이지를 만들기 위해 위의 레이아웃을 만들어야 했다.

자주 사용하던 display: flex 로 하려니까, flex는 아이템 간의 간격을 줄 수 있는 코드가 있을까? 싶어서 이번엔 display: grid를 사용해 봤다!

 

배운 내용

굉장히 뚝딱 거리다가 원하는 대로 레이아웃을 만들긴 했다! 그런데

const Container = styled.main`
  border: 1px solid black;
  background: #fff;
  margin: 100px;
  border-radius: 30px;
  display: grid;
  place-items: center;
  align-content: center;
  grid-template-rows: 0.3fr 1fr 0.3fr;
  grid-row-gap: 30px;
`;

const FormContainer = styled.form`
  width: 70%;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-row-gap: 30px;
`;

 

grid를 자유자재로 사용하는 것은 아직.. 잘 모르겠다.

나중에 flex도 제대로 익히고 싶다! 솔직히, 가운데 정렬을 하는 justifyContent: center 랑 align-items: center 밖에 안쓰는 것 같아서 말이다