-
[css] display: grid - 01.gird 속성을 사용해야하는 이유 및 장점 / subgrid에 대해서 / 브라우저 지원 범위에 대해서html, css/css-display속성들 정리 2020. 5. 11. 22:34반응형
01. display:grid에 대해서 (grid 소개)
display: grid 라는 속성이 있습니다.
(※ subgrid를 검색 해서 오신분은 본문 내용 하단 04번 내용을 바로 보시길 바랍니다.)
display: grid를 처음 접하는 사람들에게 쉽게 이해를 할 수 있게 좀더 직관 적으로 설명을 해보면 grid는 다음과 같은 장점들이 있습니다.
1) grid를 사용 하면 아래의 형태의 레이아웃을 고민 안하고 쉽게 만들 수 있습니다.
2) 리스트 아이템 끼리 사이의 간격을 간단히 줄 수 있습니다.
보충설명을 하면 일반적으로 위에 이미지처럼 간격이 있는 카드 리스트 형태의 레이아웃을 코딩을 하기 위해서는 아래의 css 처럼 작성해야 합니다.
float 속성을 사용한 css / grid 속성을 사용한 css 비교 소스
/* float 리스트 */
.cards--float {
margin-top: -10px;
margin-left: -7px;
}
.cards--float:after {
content: "";
clear: both;
display: block;
}
.cards--float li {
float: left;
width: 240px;
margin-left: 7px;
margin-top: 10px;
}grid 를 사용하면 이렇게 css를 줄일 수 있습니다.
/* grid 리스트 */
.cards--grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 7px;
}결과 화면은 동일 하게 나오는걸 확인 할 수 있습니다.
gird를 사용 하면 list에 width를 따로 입력 하지 않고 리스트에 간격과 width 비율만 입력 해주면 쉽고 간편히 만들 수 있습니다. 또 추가적으로 더 좋은 점은 아래의 이미지처럼 브라우저 창을 줄여도 자동으로 리스트의 width가 퍼센트(%)를 준것 처럼 브라우저 창에 반응 하는것을 볼 수 있습니다.
(물론 float으로 만든 리스트에 width를 퍼센트로 주면 되는데 그러면 리스트의 간격들의 값까지 포함하여 퍼센트값을 계산 해야 하기때문에 그런 번거로움이 있습니다.)html ,css 소스는 아래의 코드펜에서 확인 하실 수 있습니다.
See the Pen float으로 만든 리스트 와 grid로 만드 리스트 css 비교 by sanghwanAN (@sanghwanAN) on CodePen.
02. flex 와 grid 누가 먼저 나왔나...?
grid 속성에 대한 포스팅에 앞서 CSS 그리드 레이아웃은 2017년 3월에 크롬, 파이어폭스, 오페라, 사파리에 탑재되었습니다.
그리고 번외로 flex와 grid 둘 중에 어떤게 먼저 나왔는지 궁금해 하시는 분들도 있을것 같아서 w3c에 확인을 해봤는데 자세한 내용은 아래와 같습니다.
grid가 flex 보다 먼저 Recommendation을 공개 하였네요.
W3C 표준화 제정 단계 보는 법은 아래의 블로그를 참고 바랍니다.
WIT블로그(W3C 표준화 제정 단계 보는 법) : https://wit.nts-corp.com/2013/10/16/280/
03. grid 브라우저 지원
브라우저 지원은 can i use에서 확인을 해보면 지금 포스팅을 하는 시점에서는
다음과 같습니다.
(주요 브라우저만 캡쳐 하였고 더 자세히 알고 싶으시면 can i use : https://caniuse.com/#search=grid/ 에서 확인 할 수 있습니다.)css Grid Layout(level1)은 ie10, ie11 브라우저에서도 사용 가능 하다고 나오네요,
그러면 익스플로러 10 이하를 맞추지 않는 웹 프로젝트에서는 grid를 사용 할 수 있다라는 결론을 내릴 수 있습니다.
저의 경험상 작년 부터 참여한 신규 구축 프로젝트들은 보통 익스플로러 10 이상 부터 맞추었기 때문에 요새는 충분히 신규 웹사이트 구축시 grid를 사용 할 수 있다고 봅니다.
그래서 조금이라도 빨리 grid 사용법을 숙달 해야 할 필요성이 있다고 생각합니다.
ie 브라우저에서 grid를 적용 하게 하려면 -ms- 벤더 프리픽스(vendor prefix)를 사용해야 하고 grid 관련 속성중에 일부는 -ms- 벤더 프리픽스를 지원 안하는 속성도 있는대 이 부분에 대해서는 grid 사용법까지 포스팅이 끝나면 정리를 해 보겠습니다.
04. Subgrid 에대해서
----------- 2022-06-02 내용 추가 -----------
결론은 2019년부터 Firefox에서 서브그리드가 지원되었지만 거의 3년이 지난 지금까지 다른 브라우저는 지원하지 않았습니다. (아래 링크 주소 내용 발췌 - 2022,03.01 글)
https://www.smashingmagazine.com/2022/03/new-css-features-2022/#subgrid
윗 글에서 can i use 캡쳐 화면 중에 Subgrid 지원 브라우저 캡쳐 화면이 있는데, Subgrid가 무엇인지 몰라서 검색을 해 봤습니다. 몰랐던 분들도 이번기회에 grid 관련 용어를 알고 있어도 좋을 것 같습니다.
요점만 말하면 Subgrid는 grid에 새로운 기능 입니다.
현재 웹브라우저에서 사용 할 수 있는 그리드 기능은 CSS 그리드 명세 레벨1 : https://www.w3.org/TR/css-grid-1/#intro에 기반 합니다.
새로 만들어진 기능은 해당 명세의 다음 레벨에 포함됩니다.
CSS 그리드 레이아웃이 바로 이 단계에 있고, 레벨1 명세는 후보 권고안 상태이기 때문에 작업 중인 새 기능을 추가하기 위해 레벨2 명세를 만들었습니다.
Subgrid에 대한 설명을 계속 보고 있지만 예제가 브라우저에서 실행이 되지 않아서 글만 보고 이해 하기 힘든 부분이 있는대요, MDN에 나온 Subgrid 소개에는" grid-template-columns: subgrid중첩 그리드 를 사용 하고 부모의 세 열 트랙에 걸쳐있는 경우 중첩 그리드는 부모 그리드와 동일한 크기의 세 열 트랙을 갖습니다. 간격은 상속되지만 다른 gap값 으로 재정의 할 수도 있습니다 . 줄 이름은 부모에서 하위 표로 전달 될 수 있으며 하위 표는 자체 줄 이름을 선언 할 수도 있습니다"
이 구절이 아직 이해가 되지 않는데요,
시간이 지나서 grid에 대한 사용법 포스팅을 하고 어느정도 이해를 하게되면 그때 즘이면 다시 이해가 될거라 생각이 드는데요, 그러면 그때즘에 다시 Subgrid에 대해서 다시한번 집고 넘어가겠습니다.
지금 포스팅하는 내용은 아래의 사이트를 참고하여 포스팅을 하였습니다.
css-그리드-레이아웃을-지금-사용해도-정말-괜찮을까요
w3c-플렉스 : https://www.w3.org/TR/css-flexbox-1/
w3c-그리드 : https://www.w3.org/TR/css-grid-1/Subgrid 참고 사이트1 - CSS 그리드 레벨2: 서브그리드 : https://webactually.com/2018/08/css-그리드-레벨2-서브그리드-2/
Subgrid 참고 사이트2 - MDN : https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column/저도 아직 grid의 속성 및 사용법에 대해서 다 숙지를 하지 못한 상태인데 grid에 대해서 하나씩 하나씩 포스팅을 하면서 grid를 숙달 할 계획 입니다.
그밖의 display 속성 정리 포스팅 글
'html, css > css-display속성들 정리' 카테고리의 다른 글
[css] display: grid - 03. grid로 리스트 배열 하기( Grid Container) (2) 2020.07.04 [css] display: grid - 02.용어정리(Columns & Rows / Coloumn Gap & Row Gap / Coloumn Line & Row Line) (0) 2020.06.20 display : flex 에대해서 - 2.flex-grow, flex-basis (0) 2019.04.09 display : flex 에대해서 - 1.flex-wrap (0) 2019.03.09 개발자와 기획자가 꼭 알면 좋은 css - 3 display : inline (0) 2018.07.23 댓글