스타트업트랙 프론트엔드 개발과정 3 - (6)

CSS grid 레이아웃

페이지를 구획으로 나누는 다양한 방법

• index.html

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

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) 열의 갯수와 크기 지정

grid-template-columns

• (1) 절대값으로

.wrapper {
  grid-template-columns: 100px 200px 300px;
}

=> 페이지 너비에 따라서 빈 공간이 생길 수 있음 추천 안 함

• (2) 비율 분할(fractions)

.wrapper {
  grid-template-columns: 1fr 2fr 3fr 4fr; // 1 : 2 : 3 : 4
}

=> 페이지 너비에 상관없이 꽉 차게 사용 가능

• (3) 혼합 사용

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

=> 고정하고 싶은 값만 절대값으로 고정하고 나머지 값은 비율 분할

• (4) 반복 지정

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

3) 행의 갯수와 크기 지정

grid-template-rows

• (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) 상대값은 높이가 지정되어 있을 때

.wrapper {
  grid-template-columns: repeat(3, 1fr);
  height: 800px;
  grid-template-rows: 1fr 2fr 3fr;
}

• (4) 내부 컨텐츠의 높이에 따라
  index.html

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

style.css

.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);
}

4) 선 번호로 영역 지정

grid-column, grid-row

• index.html

<div class="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

• style.css

.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;
  grid-row: 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;
}

5) 이름으로 영역 지정

grid-template-rows

.wrapper {
  grid-template-areas: 
    "red red red"
    "green blue blue"
    "green blue blue"
    "purple purple orange";
}
.wrapper > div:nth-child(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;
}

6) grid간 공간 띄우기

.wrapper {
  gap: 10px;
}