코딩 기초)CSS (3) - Grid 레이아웃

Grid 레이아웃 : 페이지를 구획으로 나누는 다양한 방법

(기본세팅)

	- body부분
    
  <div class="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>


	- style부분
    
body { margin: 0; padding: 0; }
.wrapper { border: 2px solid black; }
.wrapper > div { 
  background-color: yellow; 
}
.wrapper > div:nth-child(even) { 
  background-color: yellowgreen;
}

1. 부모 요소를 grid 디스플레이로

.wrapper {
  display: grid;
}

2. 열의 갯수와 크기 지정

1) 절대값으로 
.wrapper {
  grid-template-columns: 100px 200px 300px;
}

2) 비율 분할(fractions)  - 페이지를 꽉 채워서 비율로 분할됨
.wrapper {
  grid-template-columns: 1fr 2fr 3fr 4fr;
}

3) 반복지정
.wrapper {
  grid-template-columns: repeat(3, 1fr);
}


** 왼쪽 1열만 픽셀 고정시키고, 2,3열은 화면을 늘리든 줄이든 화면을 꽉 채우게끔 설정하는게 가능하다!!

.wrapper {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
}

3. 행의 갯수와 크기 지정

1) 절대값으로 
.wrapper {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 200px 400px;
}

2) 상대값(높이가 지정되어있을 경우에만 가능)
.wrapper {
  grid-template-columns: repeat(3, 1fr);
  height: 800px;
  grid-template-rows: 1fr 2fr 3fr;
}

** 3) 내부컨텐츠의 높이에 따라

[ 예시 (각 높이지정) ]

  <div class="wrapper">
    <div><div>1</div></div>
    <div><div>2</div></div>
    <div><div>3</div></div>
    <div><div>4</div></div>
    <div><div>5</div></div>
    <div><div>6</div></div>
    <div><div>7</div></div>
    <div><div>8</div></div>
    <div><div>9</div></div>
  </div>


.wrapper {
  grid-template-columns: repeat(3, 1fr);
}
.wrapper > div > div { background-color: orange; }
.wrapper > div:nth-child(even) > div { background-color: tomato; }
.wrapper > div:nth-child(3n + 1) > div {
  height: 100px;
}
.wrapper > div:nth-child(3n + 2) > div {
  height: 200px;
}
.wrapper > div:nth-child(3n) > div {
  height: 300px;
}

설정하기

.wrapper {
  grid-template-rows: 100px auto minmax(100px, 200px);
}                                      최소값   최대값

** 선 번호로 행과 열 지정하기

[ 예시 ]

(기본세팅)
	- body부분
  <div class="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

	- style부분
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 150px);
}
.wrapper > div { 
  background-color: yellow; 
}
.wrapper > div:nth-child(even) { 
  background-color: yellowgreen;
}

	- 적용
    
.wrapper > div:nth-child(1) {
  background-color: red;
  grid-column: 1/4;				→ 1열~4열 (1열과 4열 사이의 공간을 뜻함)
  grid-row: 1/2;				→ 1행~2행 (1행과 2행 사이의 공간을 뜻함)
}
.wrapper > div:nth-child(2) {
  background-color: green;
  grid-column: 1/2;				
  grid-row: 2/4;				
}
.wrapper > div:nth-child(3) {
  background-color: purple;
  grid-column: 2/4;				 
  grid-row: 2/4;				
}
.wrapper > div:nth-child(4) {
  background-color: blue;
  grid-column: 1/3;
  grid-row: 4/5;
}
.wrapper > div:nth-child(5) {
  background-color: orange;
  grid-column: 3/4;
  grid-row: 4/5;
}

결과물 :

** 이름으로 영역 지정

	- 적용
    
.wrapper {
  grid-template-areas: 
    "red red red"               → 설정할 이름을 쉼표구분없이 실제 위치대로 나열해서 구간설정
    "green blue blue"
    "green blue blue"
    "purple purple orange";
}
.wrapper > div:nth-child(1) {	→ 해당 구간이 1번째임을 정해줌(구간나누기)
  background-color: red;
  grid-area: red;
}
.wrapper > div:nth-child(2) {
  background-color: green;
  grid-area: green;
}
.wrapper > div:nth-child(3) {
  background-color: blue;
  grid-area: blue;
}
.wrapper > div:nth-child(4) {
  background-color: purple;
  grid-area: purple;
}
.wrapper > div:nth-child(5) {
  background-color: orange;
  grid-area: orange;
}

** grid간 공간 띄우기

.wrapper {
  gap: 10px;
}