성배(Holy grail) 레이아웃

flex 와 grid가 없던 시절에 성배 레이아웃을 나타내는 게 어려웠다고 한다.

(css 공부를 해도 가끔하고 잘안써서 익숙해지기위해 정리한다) 

 

그럼

성배 레이아웃이란?

전체 화면을 가로로 3개의 영역을 분할한 체로, ( 헤더 , 바디 ,푸터 )

중앙에 있는 3개의 영역을 어떻게 추가로 세로로 분할  (  네비바  , 컨텐츠 ,  광고?? )

이라 한다.

괄호안은 제 생각 입니다.

 

 

grid 로 구현하기 !

 

See the Pen Untitled by Jinwoo (@woohot8) on CodePen.

 

grid-template :  auto 1fr auto / auto 1fr auto;

ex1)
format : none 
grid-template: none; 일때
==
grid-template-rows: none;
grid-template-columns: none;
grid-template-areas: none;

ex2)
format : [ <‘grid-template-rows’> / <‘grid-template-columns’> ]
grid-template: 80px / 160px 1fr auto;
==
grid-template-rows: 80px;
grid-template-columns: 160px 1fr auto;
grid-template-areas: none;

ex3)
format : [ <string> <track-size>? ]+ [ / <explicit-track-list> ]
grid-template: 'a a b' 80px 'a a c' auto 'd e f' / auto 1fr auto;
==
grid-template-rows: 80px auto auto;
grid-template-columns: auto 1fr auto;
grid-template-areas: 'a a b' 'a a c' 'd e f';

 

grid-column  : 1/4 

grid-column  : 1/4 
==
grid-column-start : 1 ;
grid-column-end: 4;

 

flex 로 구현하기 

 

See the Pen Untitled by Jinwoo (@woohot8) on CodePen.

flex-direction:column;

row,column 이있으면 주축을 결정한다

 

flex:1 

0 과 1(양수)의 차이만 있는 거 같다. (1,2,3,4,5... 일때 같다)

 

flexbox는 단방향 레이아웃만 가능

헤더와 풋터 사이의 영역을 새로운 엘리먼트로 묶어줌으로써 두 개의 다른 방향으로 Flexbox를 적용

flex 속성을 1로 지정해주므로서, 헤더와 풋터 사이에 여유 공간을 모두 점유할 수 있게 

 

 

#참고

https://www.daleseo.com/css-holy-grail-layout/

https://naradesign.github.io/css-grid-layout.html#grid-row-grid-column