Grid 그리드

미루고 미루다 그리드를 배우는 시간~~
아직 flex에 대한 개념이 부족한거 같아서
그리드로 넘어가는게 좀 망설여졌지만
그리드는 flex와 마찬가지로 grid container가 있고
grid elements 들이 있다.
사용하는 방법은 아래와 같다.

      .container--1 {
        /* STARTER */
        font-family: sans-serif;
        background-color: #ddd;
        font-size: 40px;
        margin: 40px;

        /* CSS GRID */
        display: grid;
        grid-template-columns: 250px 150px;
      }

grid-template-columns: 250px 150px;
이렇게 쓰면 칸 하나는 250 px width를 가지고
하나는 150px width를 가지게 된다.

 /* CSS GRID */
        display: grid;
        grid-template-columns: 200px 200px 100px 100px;
        grid-template-rows: 300px 200px;

        /* gap: 30px; */
        column-gap: 30px;
        row-gap: 60px;

그 밑에 rows의 길이 즉 height도 저렇게 변경할 수 있고
갭도 이런식으로 줄 수 있다는...

다음으로 이론 공부 해보자..

css grid란?
: a set of CSS properties for building 2-dimensional layouts.

the main idea behind css grid is that divide a container element into rows and columns that can be filled with its child elements

it is not meant to replace flexbox.
they work perfectly together.
1D layout - use flexbox
2D layout - CSS Grid

CSS grid에 대한 개념들 정리한 표~~~

이건 프린트하고 계속 보라고 하신다 ㅠㅠ
음 일단은 뭐가 뭔지 잘모르겠다 위에 예시로
아주 기초적인거 한거 빼고는 말이다
근데 다음시간에 다시 실습하면서 배우니까 너무 걱정하지 말자!