CSS 그리드 레이아웃, FR유닛과 뷰포트 유닛
최신스펙에 가까운 CSS 그리드 사용방식 알아보기
최신 스펙의 레이아웃 적용방식에 대해 찾아보다가. 따라하기 좋은 영상이 있어서 그 내용을 하나하나 정리해봤다. 이후에는 Flexbox와 CSS 그리드를 이용한 - 반응형 그리드 얘기가 있길래. 해당 내용을 연계해서 정리해봤다.
CSS grid layout에 대한 영상 (2017. 08 / 영어)
https://www.youtube.com/watch?v=jV8B24rSN5o
CSS gird layout의 브라우저별 지원현황
https://caniuse.com/#search=grid-template
전 세계적으로 여전히 자주 사용되는 형태기 때문에, 사용에 크케 문제가 없는 내용. flexbox같은 속성과 더불어 많이 쓰인다. ( flexbox는 vue 등의 자바스크립트 프레임워크 2세대 쪽에서도 많이 쓰이기 때문에. 꼭 알아둬야하는 내용들 중 하나다.)
CSS grid의 개념
Flexbox와 CSS 그리드의 방향값을 구분해둔 정리내용. 말 그대로 상하 간격을 조절할 수 있기 때문에 표나 카드형식을 사용하고싶다면 CSS그리드를 사용하면 된다.
실습 내용 정리
- 두개의 div를 만들어넣고. 각각의 요소에 다른 색상의 배경색상을 집어넣은 상태
- nth-child(odd)는 굳이 사용하지 않아도 되지만, 홀수에만 색상을 넣어줄 수 있어서. 칸이 늘어마녀 얼룩말 무늬 패턴이 자연스레 만들어진다.
- .wrapper에 display:grid 를 추가하고
- grid-template-columns : 70% 30%로 좌우 그리드를 설정
- 동일 div를 복붙해서 총 4개의 div를 만든 이후
- grid-template-colums : 70% 30% 였던 내용을
- grid-template-colums : 40% 30% 30% - 로 총 세개의 칸을 만들어줬다.
- 그러니 총 네개의 div가 각각 '가장 긴 세번째 아이템'의 길이에 맞춰서 - 세로 길이가 늘어났다.
- 4번째 아이템 역시도 고유한 길이에 맞게 칸이 만들어졌다.
- grid-column-gap:1em:을 넣어주니 - 좌우로 정리된 그리드끼리 간격이 생긴다.
- grid-row-gap:1em:을 넣어주니 - 상하로 정리된 그리드끼리 간격이 생긴다.
- gird-gap:1em; 을 넣으면 상하 모두에 적용된 그리드끼리 간격이 생긴다.
- 짧은 div를 여러개 만들어서, 일단 붙여넣은 이후에
- display:grid; 방식을 사용하고
- grid-template-colums: 1fr 1fr 1fr / fraction을 세개로 사용하는 경우, 기존에 100분율 %로 나눈 결과값고 비슷한 방식의 결과가 나온다.
- grid-template-colums: 1fr 1fr 1fr / fraction을 세개로 사용하는 경우의 결과와
- grid-template-colums: repeat(3, 1fr) 을 사용하는 결과값은 서로 같다. 행렬을 복사하여 사용이 가능하다는것.
- grid-template-colums: repeat(4, 1fr 2fr) 을 사용하는 결과값
- 1fr과 2fr을 총 네번 사용하겠다고 선언한것이고, 화면이 지속되는한 패턴이 반복된다 (화면이 짤림)
FR 유닛은 뭘까?
fr 유닛은 전체 화면을 - 동일 선상에 존재하는 fr들의 총합으로 나눈 결과값이다. 그렇기 때문에 한 위치의 fr의 숫자가 늘어날수록, 다른 fr들이 상대적으로 작아지게된다. 요즘 유행하는 카드형태의 그리드를 만들기엔 정말 효율적인 방식.
일단 커다란 그리드를 나눠놓고. 해당 영역에서 다시 구조를 나눌 수 있기 때문에. 커다란 덩어리를 나누는데에 집중하는것이 중요하다.
fr유닛과 css grid에 대한 내용 (영문)
https://getflywheel.com/layout/card-layout-css-grid-layout-how-to/
다시 실습으로 돌아가자
- grid-gap:1em 을 추가해서 상하좌우에 간격을 만들어주고
- grid-auto-rows: 100px 을 적용해서 각 칸의 상하크기를 변경했다.
- 지금 상태에서는 상하 크기가 100px밖에 안되기때문에, 긴 내용이 들어가게되면 - 텍스트가 영역을 빠져나오게된다.
그럼 텍스트 내용의 최대값에 크기를 맞춰야겠지?
- 기존의 grid-auto-rows: 100px; 을 변형해서
- gird-auto-rows: minmax(100px,auto); 를 적용했다.
- minmax란 - 순서대로 '최소 100px인 상하크기에. max 크기는 '내부 컨텐츠에 따라 알아서 늘려라'라는 명령이다.
- 그래서 결과적으로 컨텐츠가 길다랗게 들어간 첫번째 줄의 크기는 2번째 아이템의 크기에 맞춰서 모두 늘어난 반면
- 2, 3번째 줄의 글들은 여전히 100px의 크기를 맞추고있는것을 볼 수 있다.
네이버 블로그의 피드창같은 경우. 상하크기 간격은 정확히 제한해놓고. 말줄임표로 해결을 본 케이스다. 물론 네이버 블로그는 float:left로 해결을 봤지만. 하자면 css 그리드로도 동일한 효과를 낼 수 있다.
- div 안에 다시 class를 만들어서. 둥지를 틀듯 nested라고 이름을 명명한 경우. (이름은 뭐라도 상관은 없다.)
- 기존에 만든 class 안에 다시 display : grid 속성을 준 경우
- 원래는 서로 상하가 붙어있어야하는 형태인데. 기존에 부모 속성이 mixmax를 100px 갖고있어서, 그걸 상속받은 상태다.
- 내부의 그리드에 다시 - grid-template-columns : repeat(3,1fr) 을 주게되니
- 3개로 쪼개진 영역 내부에. 다시 1fr로 쪼개진 개별 영역이 생겨났다. (1/3 * 1*3)
- 퍼센티지로 치면 33%의 33%인셈이고. 전체 백분율로 보면 약 11%정도 크기의 내용이 나온다.
- 내부의 그리드에 다시 영역 확인을 위한 1px 아웃라인을 추가하고
- grid-auto-rows: 70px; 로 기존에 상속받았던 100px을 덮어씌웠다.
- 또한 기존의 'nested' 클래스에 padding값을 1em만큼 추가하니
- 기존의 부모값에 의해 상속되었던 1fr의 영역이 - 강제로 늘어나게된걸 확인할 수 있다.
- em으로 치면 약 5em 정도가 늘어났는데. 이는 텍스트와 nested라는 표면 사이의 패딩값이 추가되었기 때문이다.
- 이로서 fr 유닛의 개념은. 내부 컨텐츠가 증가할경우 - 기존의 틀을 깨고 - 다른 영역을 좁혀가며 자신의 크기를 키운다는걸 알 수 있다.
이 상황을 보니 - 이렇게 fr을 사용해서 반응형 그리드를 제작하기에 딱 좋을것 같다는 생각이 들었다. 꽤 편리한 방식인듯.
Flexbox와 CSS grid를 이용한 반응형 그리드
https://medium.com/@drewmck/a-ui-designers-primer-to-responsive-grids-270b523e6fa2
실제로 키워드를 사용해 검색을 해보니 바로 예상했던 결과가 나타났다. 2018년 12월 9일자 글이므로. 사실상 상단에서 보고 진행했던 영상보다 훨씬 편리한 방식을 알려준다.
창 크기에 맞춰서 개별 컨텐츠의 표기방식과 갯수 / 사이즈를 조절할 수 있는 방식이기 때문에. CSS 그리드는 여러모로 유용한 방식이다.
이 그리드 시스템은 부트스트랩의 그리드 시스템이다. 여기서 컬럼으로 쓰인걸 fr로 바꿔주기만해도 css그리드 형태로 이 내용을 그대로 구현할 수 있다. (간격은 1em이면 충분해보인다.)
- 해당 예제에서는 동일하게 gird-template-colums 이라는 방식을 사용했다.
- 그러나 유닛단위는 25 vw 라는 뷰포트 유닛단위를 사용했다. 이 부분은 fr로 대채하더라도 크게 문제는 없어보인다.
- 추가로 grid-template-areas: 라는 특이한 방식을 사용했는데. 동일 알파벳이 나오는 곳을 하나의 단위로 보는 형식이다.
- grid-template-areas같은 경우 반응형 카드 레이아웃을 적용할 때. 매우 유용한 방식으로 보인다.
뷰포트 유닛단위 : vw, vh, vmin, vmax
https://caniuse.com/#feat=viewport-units
버전별 호환성에도 크게 문제가 없는걸 확인했다.
부트스트랩이나, 기본적인 관리자 UI단의 구조같은 경우. 이런 CSS grid를 통해서도 충분히 구현이 가능해보인다.
사실 과거의 CSS 구조들에대해서도 배워두면 도움은 되겠지만. 일단은 최신스펙 기준에서 가장 자주쓰이는 내용들로 확인을 하는게 나아보인다. 유지보수나, 다른 방식의 컨텐츠 구현 방법에 대해서는 - 그때그때 배워나가는 것으로 하자.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
