[CSS] Gird Layout

Angular에서 Gird Layout을 사용하는 간단하고 자유도 높은 방식이다.
각 요소의 크기를 27 : 34 : 29 처럼 세부적으로도 나눌 수 있어서, 세밀한 디자인에 쓸 수 있는 장점이 있다.

1. html에서 구조를 잡는다

grid 전체를 둘러싸는 요소를 만들고
행(column) 종류를 나열한다.

예를 들어이와같은 정렬을 원할 경우

<div class="first-page">
  <!--1-->
    <div class="card">
        <img src="data:image/jpeg;base64,/9j">
        <p>강아지</p>
    </div>
  <!--2-->
    <div class="card">
        <img src="data:image/jpeg;base64,/9j">
        <p>고양이</p>
    </div>
  <!--3-->
    <button class="next-button">다음</button>
</div>

이 처럼 큰 요소안에 3가지 요소가 들어있게 한다.

2. CSS에서 부모 요소(큰 틀)를 통해 Gird 틀을 잡는다.

.first-page{
    display: grid;
    grid-template-columns: 3fr 3fr 1fr;
    grid-gap: 10px;
}

1) display:grid;

2) grid-template-columns: ~fr ~fr;
Grid 요소별 크기을 선언한다.
각 요소 크기의 합이 전체 크기로 계산된다.

3) grid-gap: ~~~;
요소간의 간격을 설정한다.