7. Responsive Web Design - CSS Grid

22개의 주제를 갖고 있는데 생각보다 빠르게 할 수 있습니다. 타이트하게 1시간 정도면 모든 과제를 클리어할 수 있을 것입니다. Flex와 마찬가지로 Layout에 있어 엄청 중요한 부분입니다. 복습 잘 하시길 바랍니다.

• Create Your First CSS Grid
  • 여기서 굉장히 유용한 스킬이 나왔습니다. background-color를 모든 div에 주는 것입니다. 이를 통해 전반적인 레이아웃을 쉽게 이해할 수 있습니다. grid 뿐만 아니라 flex나 다른 display property, float, box-model 등을 이해하는데 큰 도움이 됩니다.
• Add Columns with grid-template-columns
  • grid-template-columns로 column의 수와 크기를 정할 수 있습니다.
• Add Rows with grid-template-rows
  • grid-template-rows property로 row의 수와 크기를 정할 수 있습니다.
• Use CSS Grid units to Change the Size of Columns and Rows
  • 유용한 단위인 fr이 나왔습니다. flex-basis에 들어가는 숫자와 비슷한 역할을 합니다. 전체 중에 비율을 의미하는 값입니다. 예를 들어 row가 3개이고 각각 a fr, b fr, c fr을 갖는다고 하고 전체 크기가 1000px이라고 한다면 1번째 row는 $a / (a+b+c) * 1000px$ 이 됩니다.
• Create a Column Gap Using grid-column-gap
• Create a Row Gap using grid-row-gap
• Add Gaps Faster with grid-gap
  • flex의 justify-content: space-between; align-content: space-between; 과 유사한 효과를 갖지만 더 직관적이고 크기를 정할 수 있다는 점에서 유용합니다.
• Use grid-column to Control Spacing
  • 통상적으로 개발자들이 생각하는 숫자의 시작인 0이 아닌 1로 시작하고 있습니다. 따라서 마지막 숫자는 row나 column의 숫자 + 1입니다. 잘 기억해두시길 바랍니다. display: grid의 적용을 받는 자식들은 grid 내에서 자신의 위치와 크기를 결정할 수 있습니다.
• Use grid-row to Control Spacing
• Align an Item Horizontally using justify-self
  • item을 수평 방향으로 배치하는 property입니다. 그런데 여기서 배치라는 것은 전체 grid 시스템 내에서가 아니라 이미 영역이 확보된 grid 영역 안에서 글자나 그림과 같은 content가 차지할 공간을 조정하는 것입니다. align-self도 마찬가지입니다.
  • default값인 stretch, 즉 펴서 보여주는 것에서 start, center, end 등으로 값을 바꾸면 content의 위치 뿐만 아니라 해당 element가 차지하는 영역도 바뀌게 됩니다. stretch는 현재 grid 전체를 사용하는 것인데 나머지 3개는 justify-self의 경우 수평방향의 start, center, end로 위치를 조정하기 때문입니다.
• Align an Item Vertically using align-self
  • css에서 justify는 행을, align은 열을 조정하는 것을 의미합니다. flex의 경우 주 방향을 변경할 수 있어서 변경이 가능했던 경우지만 grid에서는 direction변경이 불가하기 때문에 행과 열로 이해하시면 됩니다.
  • 그리고 -self가 붙는 이것들은 flex와 마찬가지로 display: gird의 child에게만 적용되는 속성입니다.
• Align All Items Horizontally using justify-items
  • justify-items는 display: grid 속성을 갖는 parent가 사용하는 속성입니다. 한 번에 모든 child의 justify-self 값을 변경할 수 있습니다.
• Align All Items Vertically using align-items
  • 본문에는 나오지 않으나, grid에도 justify-contents, align-contents가 있습니다. contents는 element 전체를 의미하고 items는 element내의 content(글이나 그림)을 의미한다고 생각하시면 이해하는데 도움이 됩니다.
• Divide the Grid Into an Area Template
  • 주의할 점은 grid-template-areas에 있는 header, advert, content, footer는 이미 정의되어 있는 tag나 class, id를 지칭하는 것이 아닙니다. (그렇게 된다면 더 편할거 같지만요..) 다음 주제인 grid-area 속성에 넣어주어야 할 itemname입니다.
  • grid-template-areas에 대한 설명을 보면 모든 grid에 itemname을 줄 필요는 없습니다. '.' 을 이용하여 itemname이 부여되지 않는 공간을 넣을 수 있고, 이 부분에는 display: grid의 child의 순서에 맞게 배정됩니다.
• Place Items in Grid Areas Using the grid-area Property
• Use grid-area Without Creating an Areas Template
  • 여기에는 나오지 않지만 grid-area에 대한 설명을 보시면 굉장히 편한 기능이 있습니다. 시작점과 끝점을 지정하는게 아니라 시작점과 크기를 정하는 방법이 있습니다. 방법은 간단합니다. gird-area: 2 / 1 / span 2 / span 3 이렇게 쓰는데 2는 row 시작 line, 1은 col 시작 line, span 2로 하면 2 + 2 = 4가 되고 span 3은 1 + 3이 되어 4가 됩니다.
• Reduce Repetition Using the repeat Function
  • 매우 유용한 함수입니다. grid가 여러개라고 할때 하나씩 크기를 지정해주는건 너무 힘든 일이니까요..
• Limit Item Size Using the minmax Function
  • minmax function에 대한 설명입니다. 일전에 설명했던 max-width, min-width와 같은 효과를 줍니다. grid, flex 시스템에서는 가급적 width, height와 같은 일반 block 요소를 위한 크기 조절 속성 대신에 grid, flex를 위한 속성을 쓰는게 좋습니다.
• Create Flexible Layouts Using auto-fill
  • auto-fill은 grid item을 최대한 작은 사이즈로 만들어 한 행에 넣으려고 합니다. 그런데 여기서 min값으로 60px을 주었기 때문에 60px에 맞춰 크기가 조정되었습니다.
• Create Flexible Layouts Using auto-fit
  • auto-fit은 갖고 있는 item 들을 최대한 키워서 한 행을 채우려고 합니다. 그런데 여기서 minmax(60px, 1fr)을 주었기 때문에 60px보다는 크면서 한 행을 다 채우려 하기 때문에 grid container의 크기가 300px보다 큰 경우에는 5개가 그 공간을 채우고, 300px보다 작은 경우는 행을 나누게 됩니다.
  • freecodecamp의 preview의 width를 조절하면서 확인해보시길 바랍니다.
• Use Media Queries to Create Responsive Layouts
  • media query를 이용하여 column의 갯수를 조정하는 예시입니다. 일단 이 방법을 이해하고 나서 Bootstarp의 Grid System을 사용하면 편리하게 사용할 수 있습니다.
• Create Grids within Grids
  • grid items를 grid parent로 만드는 예시입니다. grid 뿐만 아니라 flex도 이와 같이 사용 가능하고, flex item을 grid parent로 만드는 것도 가능합니다.

flexbox와 마찬가지로 1분 코딩의 이번에야말로 CSS Grid를 익혀보자 를 참고하시길 강력 추천합니다. 제가 찾아본 한국어 자료 중에는 가장 잘 정리되어 있습니다. Grid와 Flex를 모두 습득하면 굉장히 빠르게 layout을 잡을 수 있게 됩니다. 이해의 깊이가 중요하므로 반복해서 보시는 것을 추천합니다.