“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
02. grid layout
grid layout은 비교적 직관적이어서 다른 레이아웃보다 사전지식이 덜 필요합니다.
일단 원하는 레이이웃을 먼저 스케치라고 그것을 위해 필요한 속성을 추가하는 방식으로 설명해보겠습니다.
네 개짜리 박스를 마크업합니다.
<body>
<div class="wrap">
<div class="grid1">header</div>
<div class="grid2">sidemenu</div>
<div class="grid3">content</div>
<div class="grid4">footer</div>
</div>
</body>
이 박스에 grid layout을 사용한다고 선언합니다.
.wrap (
display: grid;
)
가로로 2칸 세로로 3칸 이므로 grid-template-columns에 두 개의 가로 크기를 차례로 지정하고 grid-template-rows 에는 위부터 아래까지 세 개의 세로 크기를 지정합니다.
.wrap (
display: grid;
grid-template-columns: 30% 70%;
grid-template-rows: 50px 150px 50px;
)
그런 다음에는 각 칼럼의 경계선 번호를 알아내야 합니다.
칼럼이 2개이므로 경계선 번호는 1,2,3까지 있습니다.
.grid1 (grid-column:start: 1; grid-column-end: 3;)
.grid2 (grid-column:start: 1; grid-column-end: 2;)
.grid3 (grid-column:start: 2; grid-column-end: 3;)
.grid4 (grid-column:start: 1; grid-column-end: 3;)
header의 grid column은 1~3, sidemenu의 grid column은 1~2, content의 grid column은 2~3, footer의 grid column은 1~3으로 설정하면 됩니다.
이 레이아웃에서는 행이 합쳐진 칸이 없으니 row의 경우에는 개선이 불필요합니다.