CSS #14 -grid1-

1. Grid

CSS Grid는 2차원 (행과 열)의 레이아웃 시스템을 제공한다.
CSS Grid는 예전부터 핵(hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS모듈이다.

---

2. Grid container속성 -display

Grid container(컨테이너)를 정의한다.
정의된 컨테이너의 자식 요소들은 자동으로 Grid items(아이템)로 정의됩니다.
💡그리드를 작성하기 위해서는 필수적으로 컨테이너를 작성해야 한다.

값	의미
grid	block특성의 Grid container를 정의
inline-grid	inline특성의 Grid Container를 정의

💡사용법

.container{
display:grid;
}

💡인라인그리드와 그리드의 차이점??
block과 inline의 차이와 같이 grid라고만 하면 block요소와 같은(수직으로 쌓이고 등)요소로 설정되는 것이고, inline grid라고 하면 inline요소와 같은(수평으로 쌓이고 등)요소로 설정되는 것이다.

---

3. Grid container속성 기초-grid-template-rows,grid-template-columns

1. Grid-temaplate-rows

1. 명시적 행(Track)의 크기를 정의한다.
2. 동시에 라인(Line)의 이름도 정의할 수 있다.

💡사용법 예시

.container{
display:grid
grid-template-rows:1행크기 2행크기...;
grid-template-rows:[선이름] 1행크기 [선이름] 1행크기 [선이름]....;
}

1. Grid-temaplate-columns

1. 명시적 열(Track)의 크기를 정의한다.
2. 동시에 라인(Line)의 이름도 정의할 수 있다.

💡사용법 예시

.container{
display:grid
grid-template-columns:1행크기 2행크기...;
grid-template-columns:[선이름] 1행크기 [선이름] 1행크기 [선이름]....;
}

📝추가 노트
1. 여기서 단을 생성하는 것인데, 1:1비율로 열을 만들겠다고 선언하려면 grid-template-rows(or columns):fr1 fr1;이라고 입력하면 된다!
2. Repeat이라는 함수를 쓸 수 있다. repeat(반복횟수,어떤단위로 반복);으로 3열의 박스를 만들 수 있다.

---

4. Grid items 속성 기초-grid-row, grid-column

들어가기 전에 grid-row, grid-column은 컨테이너에 부여하는 것이 아니라 아이템에 부여하는 속성이다. 원하는 아이템들의 위치를 원하는 위치에 배치하기 위해서 사용한다.

쉽게 생각해서 배치하고 싶은 위치와(열과 행중에)몇칸을 갖고 배치될 것인가를 선택할 수 있다.

💡예시

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

.container{
width:600px;
display:grid;
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(3, 1fr)
border:4px solid lightgray;
}
.item{
border:10px solid red;
font-size:30px;
}
.item:nth-child(1){
grid-row:1 / 3;
grid-column:1 / 3;
}

위와 같은 방법으로 grid-row와 column의 값을 변경해가며 감을 잡아보자.
💡크롬브라우저의 경우 칸을 나타내주는 바가 안나타날 수 있으니 파이어폭스로 이용해보자.

---

5. Grid container속성 - grid-template-areas

지정된 그리드 영역 이름(grid-area)을 참조해 그리드 템플릿을 생성한다.
💡grid-area는 grid의 컨테이너에 적용하는 것이 아닌 아이템에 적용하는 속성이다.

예시)

<div class="container">
  <div class="item">HEADER</div>
  <div class="item">MAIN</div>
  <div class="item">ASIDE</div>
  <div class="item">FOOTER</div>
</div>

.container{
display:grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"header header header"
"main main aside"
"footer footer footer";
}
header{grid-area: header;}
main{grid-area:main;}
aside{grid-area:aside;}
footer{grid-area:footer;}

위의 예시를 가지고 실행시키면서 사용법을 익히는게 제일 좋은 방법인 것 같다.

💡빈공간으로 만드는 방법은 .을 입력하는 것이다.

.container{
display:grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"header header header"
"main . aside"
". footer footer";
}
header{grid-area: header;}
main{grid-area:main;}
aside{grid-area:aside;}
footer{grid-area:footer;}