Grid

grid 또한 flex처럼 레이아웃의 구조를 설정할 때 사용되는 css 키워드이다.

이전의 flex가 한번에 하나의 방향, 즉 1차원적인 레이아웃을 설정했었지만 grid는 한번에 수직, 수평의 레이아웃을 조정할수 있는 2차원적인 레이아웃의 설정이 가능하다. 따라서 구조적인 레이아웃을 만들고 싶다면 flex보다는 grid의 사용이 더 나은 선택이다.

<div className='grid-container'>
</div>

.grid-container {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 50px 50px 50px;
    // 위와 같이 반복되는 css를 repeat를 사용하여 간소화할 수 있다.
    // grid-template-columns: repeat(3, 50px);
}

flex와 마찬가지로 grid를 설정한 요소의 자식들은 grid-item으로 설정되며, 각 자식들의 크기를 grid-template-rows/columns로 조정이 가능하다. 기존에 사용하던 px, em, 또는 백분율로도 표현이 가능하지만, grid container내에서의 크기를 정의하는 fr(fraction)이라는 단위로도 설정이 가능하다.

조금 특이한점으로, css내에서 grid container의 구조 설정이 가능하다.

<section>
    <h1>Grid</h1>
    <section className='grid-container'>
        <header>Header</header>
        <aside>Sidebar</aside>
        <main>Main content</main>
        <footer>Footer</footer>
    </section>
</section>

.grid-container {
  height: 300px;
  display: grid;
  grid-template-areas:
    'header header header'
    'aside main .'
    'footer footer footer';
}

header {
  background-color: green;
  grid-area: header;
}
aside {
  background-color: red;
  grid-area: aside;
}

footer {
  background-color: yellow;
  grid-area: footer;
}
main {
  background-color: pink;
  grid-area: main;
}

위 예시처럼 grid-template-areas를 사용하여 구조를 정의할수 있는데, 문자열의 한 행이 grid-conatiner의 행을, 공백으로 구분된 각각의 문자열이 열을 나타낸다. 안에 작성된 문자열은 어떤 태그들이 grid-container를 구성하는지 알려주고, 해당 태그의 css 속성에 grid-area를 통하여 연결시켜주면 된다. 결과는 아래와 같다.