css grid

https://youtu.be/nxi1EXmPHRs

 

 

 

 

위 강의를 보고 그리드 복습하기

1. 레이아웃

flex는 아이템들을 1차원적으로 배치할 수 있게 도와준다.
(wrap 속성을 사용하여 줄 바꿈을 해줄 수 있긴 하다.)

grid는 row - cloumn 2차원적으로 배치할 수 있게 도와준다.

필요에 따라 둘을 적절히 사용하는 것이 최고!

 

2. grid 개념 정리

부모 컨테이너에 display: grid 속성을 주면 컨테이너에 포함된 자식 아이템들은 grid cell이 됨
이때 grid와 grid-cell 각각에 어떤 속성을 지정할 수 있는지 알아보자

grid에는 전체적인 template를 지정할 수 있는데,

grid-template-columns: 가로축으로 총 몇 개의 column이 들어갈 수 있는지, 각각의 column 사이즈는 어떻게 줄 건지를 지정
grid-template-rows: 세로축에
grid-template-areas: 조금 더 유연하게 지정

이 각각 아이템의 gap을 지정하는 grid-gap

grid-cell에는

grid-column-start, grid-column-end, grid-row-start, grid-row-column, grid-area
grid 안에서 각 아이템이 어떤 사이즈로, 어떤 셀에, 몇 개의 셀을 차지할 건지,, 어떤 영역에 표시되길 원하는지.

 

 

 

3. 부모 관점 속성들

// 100px씩 5번 반복
grid-template-columns: repeat(5, 100px);

// 각 배율로 사이즈가 결정됨(1/3, 1/3, 1/3)
grid-template-columns: 1fr 1fr 1fr

// 몇 줄인지는 모르지만 자동으로 사이즈를 차지하게 하려면
// 최소 150px, 그 외는 컨텐츠 길이에 맞게
grid-auto-rows: minmax(150px, auto);

 

4. 자식 관점 속성들

line 기준

 

// 몇 개의 셀에 걸쳐 차지하게 할지를 라인을 기준으로 설정
grid-column-start: 4;
grid-column-end: 2;

grid-row-start: 1;
grid-row-end: 3;

// 이걸 축약하면
grid-column: 2 / 4;
grid-row: 1 / 3;

// 혹은 라인을 카운트하기 귀찮다면, 2칸을 차지하겠다는 의미
grid-column: 2 / span 2;

 

 

 

5. 강력한 areas 이미지 활용편

grid-template-areas: 
    'a a a'
    'b c c'
    'b d g'
    'e f g'

이렇게 영역을 설정한 다음, 클래스 이름에 

.image1 {
  grid-area: a;
}

.image2 {
  grid-area: b;
}

이렇게 지정해주면 areas에 지정한 위치를 차지하게 된다.

 

 

6. 강력한 areas 사이트 활용편

지금까지 공부한 내용을 기본적인 사이트 구조에 활용한 모습 ㅇ ㅁ ㅇ !