css-반응형 웹 2

📆 2022-5-24

-학습내용-

Grid Layout과 반응형 웹 결합

🍕Grid Layout ?

Flex는 한 방향 레이아웃 시스템 (1차원)
Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원)



Flex와 마찬가지로, Grid는 컨테이너에 display: grid; 를 설정하는 것으로 시작

.container {
	display: grid;
}

---

그리드 문법

  display:grid; /*grid, gird-inline */
    grid-template-columns: repeat(2, 200px);
    grid-template-rows: minmax(220px auto);
    grid-gap: 10px 10px;
    justify-content: center;

---

grid-template-columns: repeat(2, 200px);

200px 박스를 2번 반복해서 열 배치하겠다

grid-template-rows: minmax(220px auto);

최소한 220px 높이는 확보하고, 내용이 많아 220px를 넘어가면 알아서 늘어나도록 배치한다.

grid-gap: 10px 10px;

행과 열 사이의 간격을 위쪽 10px, 오른쪽 10px를 주겠다.

justify-content: center;

중앙정렬

---

문제사항

맞게 쓴거 같은데 작동이 안되는 경우가 많다,,

---

해결방안

😉

---

학습소감

그리드 어려웡.. 근데 뭔가 요소배치 마스터하는 기분이라 좋습니다,, :)