[CSS] Grid - Container 속성 — UL의 개발 블로그

Flexible Box -> 1차원 레이아웃

Grid: 2차원 (행과 열)의 레이아웃 시스템 제공

파이어폭스 브라우저를 사용해 테스트 추천. 개발자도구를 활용하면 그리드를 이해하기 좋음.

Grid : 2차원 (행과 열)의 레이아웃 시스템 제공

Flex 같이 Container와 item으로 구분되어있다.

*CSS Grid는 예전부터 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈이다.

display

값	의미	기본값
grid	Block 특성의 Grid Container를 정의
inline-grid	Inline 특성의 Grid Container를 정의

grid-template-rows : 행의 크기 정의

grid-template-columns : 열의 크기 정의

동시에 라인의 이름도 정의할 수 있다.

*단위 : fr(fraction, 공간 비율) 단위 사용

repeat() 함수를 사용할 수 있다.

사용법

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

예제

<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{
  display: grid;
  /*grid-template-rows: 100px 100px;*/
  grid-template-rows: repeat(2, 100px);
  /*grid-template-columns: 1fr 1fr 1fr; 1:1:1 비율*/
  grid-template-columns: repeat(3, 1fr);
  border: 4px solid lightgray;
}
.item{
  border: 2px dashed red;
}

행과 열 계속 추가하는 거 귀찮다. 실수할 수도 있고. =>repeat 함수 사용

repeat 함수는 2번째 인수를 반복한다. 다음과 같이 일정한 패턴을 반복하게 할 수도 있다.

grid-template-columns: repeat(2, 100px 200px 50px);

grid-row : item 셀을 원하는 열 위치에 배치

grid-column : item 셀을 원하는 행 위치에 배치

예제

.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; /* 1번부터 3번까지 자리 차지*/
  grid-column: 1 / 3;
}
.item:nth-child(2){
  grid-row: 1 / 3;
}
.item:nth-child(4){
  grid-row: 4 / 5;
  grid-column: -1 / -3; /* 음수도 사용가능 */
}

gird-template-areas : 지정된 그리드 영역 이름 (grid-area)를 참조해 그리드 템플릿 생성

*grid-area는 Grid Container가 아니라 Item에 적용하는 속성

예제

<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{
  width: 600px;
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3,1fr);
  grid-template-areas:
    "header header header"
    "main . aside"/* .: 빈칸 */
    ". footer footer";
}
.item{
  border: 10px solid red;
}
.item:nth-child(1){
  grid-area: header;
}
.item:nth-child(2){
  grid-area: main;
}
.item:nth-child(3){
  grid-area: aside;
}
.item:nth-child(4){
  grid-area: footer;
}
header{ grid-area: header;}
main{ grid-area: main;}
asid{ grid-area: asid;}

row-gap : 행과 행 사이의 간격 지정

column-gap : 열과 열 사이의 간격 지정

* 더 명확하게는 그리드 선의 크기를 지정한다고 표현할 수 있다.

gap : 위 두 속성을 아우르는 단축속성

사용법

row-gap: 30px;
column-gap: 15px;

gap: 30px 15px; /* <row-gap> <column-gap> */

grid-auto-rows : 암시적 행의 크기 정의

grid-auto-columns : 암시적 열의 크기 정의

*암시적 행,열 : 정해놓은 행,열 밖에 암시적으로 둔 셀

암시적 크기가 적용된 행,열은 양수 라인 번호만 사용 가능

예제

<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 class="item">6</div>
</div>

.container{
  width: 600px;
  display: grid;
  grid-template-rows: repeat(2, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;/*6번*/
  grid-auto-columns: 1fr; /*5번*/
}
.item{
  border: 10px solid red;
}
.item:nth-child(1){ 
  grid-column: 1 / 3;
}
.item:nth-child(2){
  grid-column: 3 / 5;
}
.item:nth-child(3){
  grid-column: span 2;
  /*3번이 있던 지점에서 2개의 선만큼 확장*/
}
.item:nth-child(4){
  grid-row: 5 / 7;
  grid-column: 6 / 7;
}

아이템이 배치되는 위치에 맞게 암시적 행,열이 생성됨

grid-auto-flow : 배치하지 않은 아이템을 자동배치할 방법 정의

*배치한 아이템 = grid-area 사용한 아이템

속성	의미	기본값
row	각 행 축(수평축 →)을 따라 차례로 배치	row
column	각 열 축(수직축 ↓)을 따라 차례로 배치
row dense(dense)	기본기능+빈 영역 부터 메움
column dense	기본기능+빈 영역 부터 메움

예제

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

.container{
  width: 600px;
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3,1fr);
  grid-auto-flow: dense;
}
.item{
  border: 10px solid red;
}
.item:nth-child(1){
  grid-column: span 2;
}
.item:nth-child(2){
  grid-column: -1 / -3;
}

grid-template : grid-template-rows, grid-template-columns, grid-template-areas 의 단축속성

사용법

.container{
    grid-template: <grid-template-rows> / <grid-template-columns>;
    grid-template: <grid-template-areas>;
}

.container{
    grid-template:
      [1행시작선이름] "AREAS" 행너비 [1행끝선이름]
      [2행시작선이름] "AREAS" 행너비 [2행끝선이름]
      / <grid-template-columns>;
}

예제

.container{
  display: grid;
  grid-template:
    "header header header" 80px
    "main main aside" 350px
    "footer footer footer" 130px
    / 2fr 100px 1fr;
}

header { grid-area: header; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }

grid : grid-template-xxx와 grid-auto-xxx 를 아우르는 단축 속성

실무에서는 grid보단 grid-tempalte-xxx~를 주로 사용하는게... 헷갈리니깐

사용법

.container{
    grid: <grid-template>;
    grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;/*row 우선 작성이 일반적*/
    grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;
}

grid-auto-flow가 작성된 부분이 row쪽이면 grid-auto-flow: row로 적용되고

column쪽이면 grid-auto-flow: column으로 적용된다

dense 값은 auto-flow 뒤에 붙여준다.

align-content : 그리드 콘텐츠의 수직(열 축) 정렬

*그리드 콘텐츠의 세로 너비가 그리드 컨테이너보다 작아야한다

값	의미	기본값
normal	stretch와 동일	normal
start	시작점(위쪽)으로 정렬
end	끝점(아래쪽)으로 정렬
center	수직 가운데 정렬
space-between	첫 행은 시작점에, 마지막 행은 끝점에 정렬, 나머지는 사이에 고르게 정렬
space-around	각 행 위아래 여백을 고르게 정렬
space-evenly	모든 여백을 고르게 정렬
stretch	Container의 열 축을 (가득)채우기 위해 그리드 콘텐츠를 늘림

justify-content : 그리드 콘텐츠를 수평(행 축) 정렬

*그리드 콘텐츠의 가로 너비가 그리드 컨테이너보다 작아야함

값	의미	기본값
normal	stretch와 동일	normal
start	시작점(왼쪽)으로 정렬
end	끝점(오른쪽)으로 정렬
center	수평 가운데 정렬
space-between	첫 열은 시작점에, 마지막 열은 끝점에 정렬, 나머지는 사이에 고르게 정렬
space-around	각 열 좌우 여백을 고르게 정렬
space-evenly	모든 여백을 고르게 정렬
stretch	Container의 행 축을 (가득)채우기 위해 그리드 콘텐츠를 늘림

align-items : 그리드 아이템(items)들을 수직(열 축) 정렬

*그리드 콘텐츠의 세로 너비가 그리드 컨테이너보다 작아야 함

값	의미	기본값
normal	stretch와 동일	normal
start	시작점(위쪽)으로 정렬
end	끝점(아래쪽)으로 정렬
center	수직 가운데 정렬
stretch	열 축을 채우기 위해 그리드 아이템을 늘림

justify-items : 그리드 아이템(items)들을 수평(행 축) 정렬

*그리드 콘텐츠의 가로 너비가 그리드 컨테이너보다 작아야 함

값	의미	기본값
normal	stretch와 동일	normal
start	시작점(왼쪽)으로 정렬
end	끝점(오른쪽)으로 정렬
center	수평 가운데 정렬
stretch	행 축을 채우기 위해 그리드 아이템을 늘림

저작자표시 (새창열림)

'Web > CSS' 카테고리의 다른 글

[CSS] Grid 함수, 단위 (0)	2020.02.10
[CSS] Grid - items 속성 (0)	2020.02.10
[CSS] Flex - Items 속성 (0)	2020.02.07
[CSS] Flex - Container 속성 (0)	2020.02.07
[CSS] 애니메이션 & 다단 (0)	2020.02.05

Grid : 2차원 (행과 열)의 레이아웃 시스템 제공

'Web > CSS' 카테고리의 다른 글

티스토리툴바