목록grid-template (1)

Enjoy Programming

Css Master challenge 3

오늘의 css 챌린지 과제는 그리드 박스를 이용해 화면 레이아웃 잡아주기이다 매우 간단했다. 조건은 flexbox를 이용하지 않고 사용하는 것이다. 그냥 딱 봤을때 4분할만들어주고 마지막 요소에 다시 4분할 만들어주면 된다. 윈도우 전체 그리드 하나 만들어주고 그안에 main-section과 mini-section을 만들어 주었다. 자 이제 css를 보자. 모두를 감싸는 박스를 grid로 지정을 해주고 높이도 준다(높이 주는거 잊지말자 높이 안주면 그리드박스 안보임) 그리드 템플릿으로 영역을 지정해준다 아래 코드에 각 영역마다 grid-area 이름을 지정을 해줬다. 그리고 각 영역의 row와 column을 1fr씩 크기를 지정해줬다 fr을 잠시 설명하자면 비율로 영역을 나눠주는데 3개의 칼럼이 있다고 ..
CSS 2021. 4. 22. 20:16
이전 Prev 1 Next 다음