• 회원가입
  • 로그인
  • 구글아이디로 로그인

[grid] CSS - Grid Container - 그리드 컨테이너

목차

  1. Grid Container 의미 / 생성법
  2. grid-template-columns 속성 - 열 제어
  3. grid-template-rows 속성 - 행 제어
  4. justify-content 속성 - 수평 정렬
  5. align-content 속성 - 수직 정렬

※ 그리드 컨테이너에 사용되는 속성은 '속성(C)'로 표시. 

 

Grid Container 의미 / 생성법

 

1. 의미

  • Grid  의미 : 가로 너비를 지정 개수로 나눈 바둑판식 행열 레이아웃 구성.
  • Grid Container 의미 : 아이템을 Grid 방식으로 정렬 시, 아이템 감싸는 요소.

 

2. Grid Container로 사용할 요소에 아래 속성 추가.

  • display:grid - 가로 전체 너비를 지정 개수로 나눠 배분.
  • display:inline-grid - 아이템 감싸는 크기 만큼만 너비 사용.

  

 

grid-template-columns 속성 - 열 제어

 

그리드 각 열(Column: 세로줄)의 개수와 너비를 지정. 자세히 보기

 


[예제1] - 4열의 각 너비를 동일하게 자동 결정.

 

.grid-container {

  display: grid;

  grid-template-columns: auto auto auto auto;

}

 

PS. 아이템이 4열 초과 시, 자동으로 행이 추가됨.


[예제2] - 4열의 각 너비를 각각 별도로 지정.

 

.grid-container {

  display: grid;

  grid-template-columns: 80px 120px auto 160px;

}

 

 

grid-template-rows 속성 - 행 제어

 

그리드 각 행(Row: 가로줄)의 높이를 지정. 자세히 보기

 


[예제1] - 첫 행의 높이만 100px 지정. (나머지는 자동 결정) 

 

.grid-container {

  display: grid;

  grid-template-rows: 100px;

}

 


[예제2] - 1행과 2행은 별도 지정. (나머지는 자동 결정.)

 

.grid-container {

  display: grid;

  grid-template-rows: 100px 200px;

}

 

 

justify-content 속성 - 수평 정렬

 

그리드 컨테이너 내부의 아이템들 수평 정렬 방식 지정. 자세히 보기

 

PS. justify-content 속성 적용 조건: (그리드 전체 너비 < 컨테이너 너비)


[예제1] - 양끝과 각 아이템간 간격 동일. (∴ 양끝 간격 = 아이템간 간격)

 

.grid-container {

  display: grid;

  justify-content: space-evenly;

}

 


[예제2] - 각 아이템 양쪽 여백 동일 (∴ 양끝 간격 < 아이템간 간격) 

 

.grid-container {

  display: grid;

  justify-content: space-around;

}

 


[예제3] - 양쪽 끝에 붙이고, 나머지 가운데는 균등 간격으로 배치.

 

.grid-container {

  display: grid;

  justify-content: space-between;

}

 


[예제4] - 가운데 몰아 배치

 

.grid-container {

  display: grid;

  justify-content: center;

}

 


[예제6] - 왼쪽에 몰아 배치.

 

.grid-container {

  display: grid;

  justify-content: start;

}

 


[예제7] - 오른쪽에 몰아 배치.

 

.grid-container {

  display: grid;

  justify-content: end;

}

 

 

align-content 속성 - 수직 정렬

 

그리드 컨테이너 내부의 아이템들 수직 정렬 방식 지정. 자세히 보기


PS. align-content 속성 적용 조건: (그리드 전체 높이 < 컨테이너 높이)


[예제1] - 상하 맨끝과 아이템간 간격 모두 동일.

 

.grid-container {

  display: grid;

  height: 400px;

  align-content: space-evenly;

}

 


[예제2] - 각 아이템의 상하 여백 동일 (∴ 상하양끝간격 < 아이템 간격)

 

.grid-container {

  display: grid;

  height: 400px;

  align-content: space-around;

}

 


[예제3] - 맨위와 맨아래는 붙이고, 나머지 가운데는 행간 간격 균등.

 

.grid-container {

  display: grid;

  height: 400px;

  align-content: space-between;

}

 


[예제4] - 가운데 몰아 배치.

 

.grid-container {

  display: grid;

  height: 400px;

  align-content: center;

}

 


[예제5] - 맨 위에 몰아 배치.

 

.grid-container {

  display: grid;

  height: 400px;

  align-content: start;

}

 


[예제6] - 맨 아래 몰아 배치.

 

.grid-container {

  display: grid;

  height: 400px;

  align-content: end;

}



방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
selector CSS - element>element 자식선택자 ★ - 직접 자식요소만 선택. (요소선택자, IE7)
selector CSS - element+element 인접선택자 ★★ - 바로 뒤 인접형제요소 (요소선택자, IE7) + …
selector CSS - element~element 형제선택자 ★★ - 지정요소 뒤의 모든 특정형제요소 (요소선택자군…
selector CSS - [attribute] 속성선택자 - 특정 속성 보유 요소 (IE7) ※ 여러 속성 보유 선택자
selector CSS - [attribute=value] 속성선택자 - 지정속성값보유요소 선택 (IE7) ※ 특정 (속성/…
1/25
목록
찾아주셔서 감사합니다. Since 2012