1. Grid란 무엇일까?
다들 SNS를 둘러보다보면 '네컷사진'을 올린 친구들을 보거나, 직접 찍어 본 경험이 있을 것이다.
이렇게 여러조각으로 나누어진 사진들을 모아서 배치하는 것을 '그리드'라고 할 수 있는데, 이러한 그리드를 css를 이용하여 웹페이지에 스타일링 하려면 어떻게 해야할까?
2. row / column
그리드는 행과 열로 이루어져 있다.
행과 열, 다들 많이 들어 봤을 것인데 행은 row 이며 간단히 말해서 '가로'라고 생각하면 되며
열은 column으로 행과 반대로 '세로'라고 기억하자!
그렇다면, 저 위의 하루필름 사진은 몇개의 행과 열로 이루어져 있을까?
정답은 3개의 행 (row) 와 2개의 열 (column)으로 이루어져 있다.
CSS에서 grid row 와 column을 이용하기 위해서는 template라는 속성을 사용해서 행과 열의 크기를 지정해 주어야한다.
- template
grid-template-columns: colum(열)의 넓이 (크기 ) 지정하기grid-template-rows: row(행)의 높이 지정하기
여기서 주의할 점은 행과 열의 갯수가 아닌 '크기'를 지정하는 것이다!!
이렇게 입력된 코드값은 크기 단위로 입력이 되었고, 각 column과 row의 순서에 맞게 입력된 값이 적용 된 것을 볼 수 있다.
보라색은 적용된 column의 크기를 표시하고 있고, 파란색은 row의 크기를 표시하고 있다.
grid-template-columns: colum1 넓이 colum2 넓이;
grid-template-rows: row1 높이 row2 높이;위 코드와 같이 이렇게 이해하면 된다.
- 이름 지정하기
grid-template-columns: [firstcolumn] 150px [secondcolumn] 100px;
grid-template-rows: [firstrow] 100px [secondrow] 100px;혹시 헷갈린다면, 각 라인에 이렇게 이름을 붙일 수도 있다
- 비율로 지정하기 - fr
아이템의 크기를 고정된 값으로 정해주지 않아도 된다면, 유지보수를 위해 비율로 설정해주는 것이 좋다.
그리드에서는 %가 아닌 fr을 많이 사용하는데, fr은 fraction(분수)의 약자이다.
이렇게 나타낸다면 column은 넓이 500px 중의 1/2씩 넓이를 가져가고,
row는 높이 300px 중의 1/2씩 높이를 가져가서 위와같은 결과로 출력 된다.
만약 컨테이너의 넓이나 높이가 안정해져있고 유동적이라면 이렇게 fr로 크기를 지정해준 아이템들은 비율은 유지한채 자유롭게 크기가 조절 되어 유지보수에 용이할 것이다.
- 반복하기 - repeat()
위와 같이 같은 1fr이 두번 반복되는경우 간단히 줄여서 나타낼 수 있는데 이때 사용하는것이 repeat이다.
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;위의 코드를 repeat을 사용하면
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);이렇게 간단하게 나타낼 수 있다. 지금은 아이템이 2개밖에 없어 간단하게 나타내는 것 같아 보이지 않지만, 많은 아이템의 비율을 설정해야하는 경우
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /* 1번 코드 */
grid-template-columns: repeat(7, 1fr); /* 2번 코드 */1번의 긴 코드가 2번코드로 간단해진 것을 볼 수 있다.
3. 각셀의 영역 지정
그리드를 보면 위 예제들처럼 딱 떨어지지않고, 넓이와 높이가 제각각인 경우들을 많이 봤을 것이다. 이러한 레이아웃들은 어떻게 만들어진 것일까?
그전에 그리드의 각 줄의 번호 (grid line)의 개념을 잘 익혀둬야 나중에 헷갈리지 않는다.
- grid line
이렇게 그리드라인은 맨 처음 줄부터 1로 선택하므로 아이템의 숫자와 헷갈리지 않도록 주의해야한다.
- grid-column-start & grid-column-end
column(열)의 시작값과 끝 값을 지정해준다.
grid-column-start: 1;
grid-column-end: 3;- grid-row-start & grid-row-end
row(행)의 시작값과 끝 값을 지정해준다.
grid-row-start: 1;
grid-row-end: 3;이렇게 하나하나 start와 end를 지정해주기 너무 귀찮은데 한번에 지정해 줄 수는 없을까? 그럴때 사용하는 것이 바로 grid-column , grid-row 속성이다.
- grid-column & grid-row
grid-column-start: 1; /* 1번 */
grid-column-end: 3; /* 2번 */
grid-column : 1 / 3; /* 3번 */gird-column은 grid-column-start와 girld-colum-end를 축약시킨 단축 속성으로,
1번코드와 2번코드를 합친 코드가 3번코드이다.
gird-column : 시작 값 / 끝 값 으로 나타낸다.
이렇게 start와 end의 값을 각 각 지정해줘도 되고,
grid-column : 1 / span 2; 위와 같이 span을 사용해서 나타내주어도 된다.
span은 우리가 처음에 배웠던 gird-line으로 나타내는 개념이 아니라 ' 차지하는 칸의 수'를 나타내는 것으로 위 코드를 분석해보면
1번 시작 줄 부터 2칸을 차지하겠다! 라는 뜻이 된다.
row도 column과 마찬가지로 나타낼 수 있다.
- grid-area
위에서 start와 end를 축약한 grid-column과 grid-row를 배웠지만 나는 이 둘을 따로 쓰는 것도 귀찮아!! 라고 생각하시는 분들이 있을 것이다.
이럴경우 grid-column과 grid-row 또한 한줄로 합칠 수 있는 속성이 있는데, 바로 grid-area를 사용하면 된다.
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;grid-area에는 총 4개의 값들이 들어간다.
위 코드에서 처럼 grid-row-start, grid-column-start, grid-row-end, grid-column-end 순서로 작성하면 된다.
