[grid] CSS - grid-area 속성(I) - 그리드 아이템 영역 '위치/크기확장' 지정 또는 그리드 아이템 영역 이름 지정 (= grid-area속성 = 그리드에어리어속성)

1. grid-area 예제 - 그리드 아이템 영역 '위치/크기' 직접 지정
2. grid-area 정의
3. grid-area 구문
4. grid-area 예제 - 그리드 아이템 영역 '이름'만 지정 후 참조

grid-area 예제 - 그리드 아이템 영역 '위치/크기' 직접 지정

[목차]

• [span 키워드로 영역 크기 지정 방식]
• [끝행과 끝열로 영역 크기 지정]

 

---

[span 키워드로 영역 크기 지정 방식]

※ span 키워드를 이용해 지정 개수만큼 행열 확장.
 

<style>

.grid-box {

  display: grid;

  grid-template-columns: auto auto auto auto;

  grid-gap: 10px;

  background-color: pink;

  padding: 10px;

}

.grid-box > div {

  background-color: rgba(255, 255, 255, 0.8);

  text-align: center;

  padding: 10px 0;

  font-size: 30px;

}

.a {

  grid-area: 2 / 1 / span 2 / span 3; /* 2행부터 2개행, 1열부터 3개열 확장 */

}

</style>

<div class="grid-box">

  <div class="a">a</div>

  <div class="b">b</div>

  <div class="c">c</div>  

  <div class="d">d</div>

  <div class="e">e</div>

  <div class="f">f</div>

  <div class="g">g</div>

</div>

 

결과보기

---

[끝행과 끝열로 영역 크기 지정]

※ 주의: 행과 열의 끝 좌표는 포함 X

 

<style>

.a { grid-area: 1 / 1 / 2 / 2; } /* 1행부터 2행 앞까지, 1열부터 2열 앞까지 */

.b { grid-area: 1 / 2 / 2 / 3; }

.c { grid-area: 1 / 3 / 2 / 4; }

.d { grid-area: 2 / 1 / 3 / 2; }

.e { grid-area: 2 / 2 / 3 / 3; }

.f { grid-area: 2 / 3 / 3 / 4; }

.grid-box {

  display: grid;

  grid-auto-columns: 50px;

  grid-gap: 10px;

  background-color: pink;

  padding: 10px;

}

.grid-box > div {

  background-color: rgba(255, 255, 255, 0.8);

  text-align: center;

  padding: 10px 0;

  font-size: 30px;

}

</style>

<div class="grid-box">

  <div class="a">a</div>

  <div class="b">b</div>

  <div class="c">c</div>  

  <div class="d">d</div>

  <div class="e">e</div>

  <div class="f">f</div>

</div>

 

결과보기 

PS. grid-template-columns 속성은 grid-auto-columns 속성을 덮어씀.

grid-area 정의

 

그리드 아이템 영역의 '위치/크기'를 지정하거나 아이템의 '이름'을 지정. (아래 속성을 일괄 지정 가능한 단축 속성)

• grid-row-start 속성 - 영역 시작행
• grid-column-start 속성 - 영역 시작열
• grid-row-end 속성 - 영역 끝행
• grid-column-end 속성 - 영역 끝열

 

---

 

1.

영역 '이름' 지정 방식으로 사용 경우, grid-template-areas 속성에서 해당 이름을 참조해 영역 지정함.

 

2.

• 기본값: auto / auto / auto / auto
• 상속여부: X
• 애니가능: O
• CSS버전: CSS Grid Layout Module Level 1
• JS구문: object.style.gridArea="1 / 2 / span 2 / span 3";

 

3.

IE 제외한 주요 최신 브라우저 모두 지원.

 

4. MDN grid-area 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area

 

grid-area 구문

 

selector {grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;}

 

---

[속성값]

 

grid-row-start

아이템 영역 시작행 좌표

grid-column-start

아이템 영역 시작열 좌표

 

grid-row-end

아이템 영역 끝행 좌표 (포함 X) 

• span number 형식 경우, 지정 숫자만큼 확장. (예) span 2 경우, 2개행 확장.

grid-column-end
아이템 영역 끝열 좌표 (포함 X) 

• span number 형식 경우, 지정 숫자만큼 확장. (예) span 3 경우, 3개 열 확장.

 

itemname

아이템 이름.

• 이 이름을 grid-template-areas 속성에서 참조함.

 

grid-area 예제 - 그리드 아이템 영역 '이름'만 지정 후 참조

[목차]

• [1행의 모든 열을 확장]
• [1행의 2열만 확장]
• [행열 확장]
• [3단 레이아웃 짜기]

 

---

[1행의 모든 열을 확장]

 

<style>

.a {

  grid-area: hz;

}

.grid-box {

  display: grid;

  grid-template-areas: 'hz hz hz hz hz';

  grid-gap: 10px;

  background-color: pink;

  padding: 10px;

}

.grid-box > div {

  background-color: rgba(255, 255, 255, 0.8);

  text-align: center;

  padding: 10px 0;

  font-size: 30px;

}

</style>

<div class="grid-box">

  <div class="a">a</div>

  <div class="b">b</div>

  <div class="c">d</div>  

  <div class="d">d</div>

  <div class="e">e</div>

  <div class="f">f</div>

</div>

 

결과보기

---

[1행의 2열만 확장]

 

<style>

.a {

  grid-area: hz;

}

.grid-box {

  display: grid;

  grid-template-areas: 'hz hz . . .';

  grid-gap: 10px;

  background-color: pink;

  padding: 10px;

}

.grid-box > div {

  background-color: rgba(255, 255, 255, 0.8);

  text-align: center;

  padding: 10px 0;

  font-size: 30px;

}

</style>

<div class="grid-box">

  <div class="a">a</div>

  <div class="b">b</div>

  <div class="c">d</div>  

  <div class="d">d</div>

  <div class="e">e</div>

  <div class="f">f</div>

  <div class="g">g</div>

  <div class="h">h</div>

  <div class="i">i</div>  

</div>

 

결과보기

---

[행열 확장]

 

<style>

.a {

  grid-area: hz;

}

.grid-box {

  display: grid;

  grid-template-areas: 'hz hz . . .' 'hz hz . . .';

  grid-gap: 10px;

  background-color: pink;

  padding: 10px;

}

.grid-box > div {

  background-color: rgba(255, 255, 255, 0.8);

  text-align: center;

  padding: 10px 0;

  font-size: 30px;

}

</style>

<div class="grid-box">

  <div class="a">a</div>

  <div class="b">b</div>

  <div class="c">d</div>  

  <div class="d">d</div>

  <div class="e">e</div>

  <div class="f">f</div>

  <div class="g">g</div>

</div>

 

결과보기

---

[3단 레이아웃 짜기]

 

<style>

.a { grid-area: header; }

.b { grid-area: left; }

.c { grid-area: main; }

.d { grid-area: right; }

.e { grid-area: footer; }

.grid-box {

  display: grid;

  grid-template-areas:

  'header header header header header header'

  'left main main main right right'

  'left footer footer footer footer footer';

  grid-gap: 10px;

  background-color: pink;

  padding: 10px;

}

.grid-box > div {

  background-color: rgba(255, 255, 255, 0.8);

  text-align: center;

  padding: 10px 0;

  font-size: 30px;

}

</style>

<div class="grid-box">

  <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>

 

결과보기