CSS

과거에는 inline-block을 통해 block으로 된 요소를 inline으로 배치했고 간격도 일일이 조정해줬음그러나 화면마다 비율이 다 달라서 완벽한 배치를 하기가 어려웠음이를 보완하기 위해 등장한 것이 flexbox배치를 하고자 하는 속성과 붙어있는 부모에 dis

그리드 레이아웃을 사용하기 위해서는 column(열), row(행)을 지정해줘야 함. 또한 flexbox와 같이 부모 요소에서 grid를 지정해준다.원하는 만큼의 column 개수를 적어라 → 각각의 넓이를 가지는 열이 4개가 생성됨.원하는 만큼의 row의 개수를 적어

grid-column-start, grid-column-end로 따로 지정해줬던 시작과 끝을 한꺼번에 지정할 수 있음시작과 끝을 바로 명시해버리는 방법도 있지만 얼만큼의 공간을 차지하는지 명시하는 방법도 있음이때 음수는 맨 끝부터 -1, -2, -3, ... 을 의미함

브라우저의 크기를 조절할 때 grid 안에 들어있는 item들의 최소 크기, 최대 크기를 정한다.auto-fill정해진 크기 안에서 가능한 한 많은 빈 column(row)를 만들어냄. auto-fit현재 element를 늘려서 column(row)에 딱 맞게(fit)