GRID를 쉽게 배우기위한 GRID GARDEN 게임

안녕하세요 😉

유유자적한 개발자 유로띠 입니다 😀

👏👏👏👏

 

 

 

 

 

🎉 GRID GARDEN

---

📢 css grid garden game

grid를 쉽고 재미있게

배우기 위해

css-grid-garden

게임을 해보았습니다.

Grid Garden

 

각 문항에 대한 정답은

유로띠 github에 있습니다.

 

그럼 grid 문제를

풀어볼까요? 👀

 

 

🙆‍♂️  grid-column-start / grid column-end 배워보기

 

✅  1번

.water {
  grid-column-start: 3;
}

✅  2번

.water {
  grid-column-start: 5;
}

✅  3번

.water {
  grid-column-start: 1;
  grid-column-end: 4;
}

✅  4번

.water {
  grid-column-start: 5;
  grid-column-end: 2;
}

✅  5번

 

오른쪽 맨 끝은 -1 입니다.

.water {
  grid-column-start: 1;
  grid-column-end: -2;
  /* 오른쪽 맨 끝은 -1 이다.*/
}

✅  6번

.poison {
  grid-column-start: -3;
}

✅  7번

 

span은 양수만 가능합니다.

.water {
  grid-column-start: 1;
  grid-column-end: span 2;
  /* span은 양수만 설정 가능하다.*/
}

✅  8번

.water {
  grid-column-start: 1;
  grid-column-end: span 5;
  /* span은 양수만 설정 가능하다.*/
}

✅  9번

.water {
  grid-column-start: span 3;
  grid-column-end: 6;
  /* span은 양수만 설정 가능하다.*/
}

 

---

🙆‍♂️  grid-column 배워보기

 

grid-column: start / end

 

✅  10번

 

start, end를 한번에 입력 가능합니다.

.water {
  grid-column: 4 / 6;
  /* start,end 를 한번에 입력 */
}

✅  11번

.water {
  grid-column: 2 / span 3;
  /* start,end 를 한번에 입력 */
}

 

---

🙆‍♂️  grid-column / grid-row 배워보기

 

 

✅  12번

.water {
  grid-row-start: 3;
}

✅  13번

.water {
  grid-row: 3 / 6;
}

✅  14번

.poison {
  grid-column: 2 / 3;
  grid-row: -1 / -2;
}

✅  15번

.water {
  grid-column: 2 / span 4;
  grid-row: span 5;
}

 

---

🙆‍♂️  grid-area 배워보기

 

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end 

 

 

✅  16번

.water {
  grid-area: 1 / 2 / 4 / 6;
}

✅  17번

.water-2 {
  grid-area: 2 / 3 / 5 / 6;
}

 

 

---

🙆‍♂️  order 배워보기

 

grid 요소의 순서를 지정합니다.

 

 

✅  18번

.poison {
  order: 4;
  /* grid 요소의 순서를 지정 */
}

✅  19번

.poison {
  order: -1;
  /* grid 요소의 순서를 지정 */
}

 

---

🙆‍♂️  grid-template-columns 배워보기

 

grid 열의 크기와 명칭을 지정합니다.

repeat: 반복

 

 

✅  20번

.garden {
  grid-template-columns: 50%;
  /* grid 열의 크기와 명칭을 지정 */
}

✅  21번

.garden {
  grid-template-columns: repeat(8, 12.5%);
  /* repeat 반복 */
}

✅  22번

.garden {
  grid-template-columns: 100px 3em 40%;
  /* repeat 반복 */
}

✅  23번

 

fr(fractional): 사용가능한 공간을 하나로 공유하여 할당합니다.

.garden {
  grid-template-columns: 1fr 5fr;
  /* fr(fractional) 사용가능한 공간을 하나로 공유하여 할당 */
}

✅  24번

.garden {
  grid-template-columns: 50px 1fr 1fr 1fr 50px;
}

✅  25번

.garden {
  grid-template-columns: 75px 3fr 2fr;
  /* 75px 3/5 2/5 */
}

 

---

 

🙆‍♂️  grid-template-rows 배워보기

 

 

✅  26번

.garden {
  grid-template-rows: 12.5px 12.5px 12.5px 12.5px auto;
}

 

---

 

🙆‍♂️  grid-template 배워보기

 

 

✅  27번

.garden {
  grid-template: 60% 40% / 200px;
}

✅  28번

.garden {
  grid-template: 1fr 50px / 1fr 4fr;
}

 

 

 

당근 정원 완성

👏👏👏👏