CSS - 레이아웃 스타일(Grid)

 

 

 

레이아웃 스타일(Grid)

 

• 그리드 아이템 너비 - grid-template-columns
• 그리드 아이템 사이의 여백 - gap
• 그리드 아이템 높이 - grid-template-rows
• 칼럼의 시작과 끝 설정 - grid-column, grid-row
• grid-column과 gird-row 한 번에 설정 - grid-area

 

 

 

 

 

 

 

display : grid

 

• grid를 사용하기 위해서 해당 설정을 해줘야 한다.

 

---

 

그리드 아이템 너비 - grid-template-columns

 

• 그리드 아이템 너비
• 한 행당 그리드 아이템을 여러 개 놓을 경우 띄어쓰기로 구분하여 설정
• auto 속성을 넣게 되면 화면 페이지의 크기에 맞춰준다.

 

.container {
    display: grid;

    /* grid-template-columns : 그리드 아이템 너비 
    한 열에 그리드 아이템을 여러 개 놓을 경우 띄어쓰기로 구분 
    필요한 그리드 아이템 수 만큼 너비 지정 */
    grid-template-columns: 200px 200px 200px;
    grid-template-columns: 100px 200px auto;
}

---

 

.container {
    display: grid;

    /* 고정 너비 사용 시
    화면 너비가 넓어지면 공간 발생
    회면 너비가 좁아지면 화면 잘리게 보이지 않도록 화면 비율로 크기가 조절되도록
    그리드에서 사용하는 fr(fraction) 단위 사용 
    */
    grid-template-columns : 1fr 1fr 1fr;
    /* 반복 되는 패턴이 있다면 repeat 사용 */
    grid-template-columns: repeat(3, 1fr);
}

---

 

그리드 아이템 사이의 여백 - gap

 

• 그리드 아이템 사이의 여백
• row-gap : 행 사이 여백 설정
• column-gap : 열 사이 여백 설정
• gap : 행과 열 사이 여백 한 번에 설정
         ex) gap : 20px 20px;    or   gap : 20px;

 

.container {
    ...

    /* gap : 그리드 아이템 사이의 여백 */
    row-gap : 20px;
    column-gap: 10px;
    gap : 20px 10px;
    gap : 20px;

}

row-gap : 20px;                                                                   row-gap : 20px; row-gap : 10px;

gap : 20px;

---

 

그리드 아이템 높이 - grid-template-rows

 

• 그리드 아이템 높이
• 아이템 당 높이 설정 가능
• 한 행에 존재하는 아이템 개수를 알 수 없을 때는 gid-auto-rows 사용
• minmax(min, max) 아이템의 최소 높이와 최대 높이 설정

 

---

 

칼럼의 시작과 끝 설정 - grid-column, grid-row

 

• grid-column-start와 grid-column-end의 속성을 한번 설정
• grid-column : start/end; or grid-column : start/span 개수;
                    ex) grid-column : 1/3;   or  grid-column : 1/span 2;
• gird-row 도 같은 방법으로 설정 가능

 

.item:nth-child(1) {
    /* 컬럼 시작/끝 설정 */
    /* grid-column-start: 1; */
    /* grid-column-end: 3; */
    /* 컬럼 시작/끝 설정 한 번에 */
    grid-column: 1/3;
    grid-column: 1/span 2;
}

grid-column 적용한 하기전과 적용했을 때 화면

---

 

grid-column과 gird-row 한 번에 설정 - grid-area 

 

• gird-area : 로우시작/칼럼시작/로우끝/컬럼끝;