멋사 처음 시작할때 영웅님께서 해주신 말씀이 기억이 난다.
익숙하지 않은 거지 어려운게 아니다.. - by.영웅..
그리드는 멋사 과정을 통해 처음 접하게 되었다.
그래서 이름부터 익숙치 않아 긴장되고 걱정 했는데..
막상 수업을 들어보니..
따봉 그리드야 고마워..
레이아웃 배치의 최고봉인 거 같다.
그리드를 이용하면 손 쉽게 자식요소를 원하는 위치에 배정이 가능하다! (개꿀)
그리드는 선을 이용해서 배치를 하기 때문에, 선의 시작과 끝을 잘 지정해주는게 중요하다.
사용방법
우선, 컨테이너에 그리드를 설정해준다.
.container {display: grid;}이렇게 display를 grid로 변경해주면 직계자손이 grid item이 된다.
(직/계/자/손만 되는게 뽀인트!
만약, 컨테이너 안에 텍스트를 입력 했다면 텍스트도 암시적으로 grid item !)
그리고, 그리드에 크기를 지정해줄 템플릿 행 / 열을 만들어 준다.
.container {grid-template-columns: 1fr 1fr ; grid-template-rows: auto; }1fr이란? friction(분수)의 약자로 컨테이너 내의 공간을 숫자 비율대로 나눠준다.
자동으로 계산해서 만들어 주기 때문에 반응형 레이아웃을 만들때 유용하다.위의 1fr 1fr 은 해당 컨테이너를 1:1 비율로 나눈다는 뜻이다.
물론 100px 고정형 사이즈도 지정이 가능하다.
1fr 1fr 1fr..여러번 쓰는게 불편할 수 있는데 이럴때는 repeat 함수를 사용하면 됨!
.container {grid-template-columns: repeat(12,1fr) 이렇게 써주면 1fr 사이즈의 12개의 열이 완성 된다.
위 이미지는 column : repeat (4,1fr), row : auto; 이다.
가로축을 보면 4개의 cell이 있지만 5개의 line이 있는걸 볼 수 있다.
세로축은 2개의 cell 과 3개의 line!
요 line을 따라 grid item 을 이동 시켜줄 수 있다.
.box1 {
grid-row-start:2;
grid-row-end:3;
grid-column-start:1;
grid-column-end:3; }row 부터 보면 시작 위치가 2번째 줄 부터 시작해서 3번째 줄에서 끝난다.
column은 1번째 줄에서 시작해서 3번째 줄로 끝난다.
약간 헷갈리는 점이 라인의 첫 시작이 박스 보더 위치라서
첨에 계산하는게 익숙하지 않았다.
저 긴 태그를 간단하게 줄여서
.box1 {
grid-row : 2 / 3;
/* grid-row: 가로 시작 / 가로 끝 */
grid-column: 1 / 2; }
/* grid-column: 세로 시작 / 세로 끝 */더 간단하게 줄이면 이렇게 한줄로 작성이 가능하다.
.box1 {
grid-area: 2 / 1 / 3 / 2; }
/* grid-area: 가로시작 / 세로시작 / 가로끝 / 세로끝 */
마지막으로 완전 쇼킹했던 방법!
.box1 {grid-area: 박스 ;}.conatiner {
grid-template-areas: "박스 박스 박스"
"박스 박스 박스";}
이렇게 쓰면 레이아웃을 원하는 칸 만큼 쉽게 설정이 가능했다.
박스라는 단어를 여러번 써야하는 단점이 있지만..
굉장히 직관적이라 이해가 한번에 빡!
