목차
- grid 예제 - 3단 레이아웃
- grid 예제 - 3열 구조
- grid 정의 & 속성 개괄
- grid 관련 주소
grid 예제 - 3단 레이아웃
<style>
.a { grid-area: header; }
.b { grid-area: left; }
.c { grid-area: main; }
.d { grid-area: right; }
.e { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'left main main main right right'
'left footer footer footer footer footer';
gap: 10px;
background-color: pink;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 10px 0;
font-size: 30px;
}
</style>
<div class="grid-container">
<div class="a">Header</div>
<div class="b">Left</div>
<div class="c">Main</div>
<div class="d">Right</div>
<div class="e">Footer</div>
</div>
결과보기
grid 예제 - 3열 구조
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: pink;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid gray;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
결과보기
PS. 컨네이너에 display:inline-grid 준 경우, 결과보기
grid 정의 & 속성 개괄
[목차]
[grid 의미]
- 그리드 (Grid) - 전체 가로 너비를 컬럼(column: 열)의 개수에 의해 자동 배분해 레이아웃 결정.
- 컨테이너 (Container) - 그리드 아이템을 감싸는 부모요소
- 아이템 (Item) - 그리드로 레이아웃 배치할 각각의 요소들
[그리드 선언]
컨테이너에 display:grid (또는, display:inline-grid) 속성 추가.
- .grid-container { display: grid;} - 각 아이템이 전체 너비를 각 아이템 개수로 나눈 너비 만큼 너비 차지
- .grid-container { display: inline-grid; } - 각 아이템이 해당 내용만큼만 너비 차지.
[행열 의미]
- 행 (row : 로우) - 가로줄
- 열 (column :컬럼) - 세로줄
[행열 '개수/영역']
(1) 개별 지정
(2) 일괄 지정
cf. 관련 속성
[행열 간격]
(1) CSS3 부터
(2) CSS3 이전
PS. CSS3에서 'grid-' 접두어 빼고 속성명 재명명함.
[열 '위치/확장']
[행 '위치/확장']
[아이템 (수평/수직) 정렬]
PS. 이 속성들은 flex 레이아웃에서도 사용 가능.
grid 관련 주소
1분 코딩 님 - (flex + grid) 강의
https://youtu.be/eprXmC_j9A4
모질라 - grid 강의
https://developer.mozilla.org/en-US/docs/Web/CSS/grid
