[css] display: grid - 01.gird 속성을 사용해야하는 이유 및 장점 / subgrid에 대해서 / 브라우저 지원 범위에 대해서
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/
W3C 표준화 제정 단계
W3C 기술문서의 표준화 제정 단계는 웹 기술을 표준화 하기 위해서 W3C의 워킹그룹이 따라야 하는 여러 절차와 요구사항이다. 그리고 각 단계들은 공개된 문서가 최종 권고안으로 발전하기까지 ��
wit.nts-corp.com
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
New CSS Features In 2022 — Smashing Magazine
2022 is shaping up to be a pretty great year for CSS, with a plethora of new features on the horizon. Some are already starting to land in browsers, others are likely to gain widespread browser support in 2022, while for one or two the process may be a lit
www.smashingmagazine.com
윗 글에서 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-그리드-레이아웃을-지금-사용해도-정말-괜찮을까요
CSS 그리드 레이아웃을 지금 사용해도 정말 괜찮을까 - Webactually
저는 경비행기 조종을 배우고 있습니다. 경비행기 조종을 하면 컴퓨터에서 벗어날 수 있죠. 얼마 전에는 세스나150Cessna 150을 조종하고 있었습니다. 브리스틀 공항에 접근하면서 기체 고도를 낮��
webactually.com
w3c-플렉스 : https://www.w3.org/TR/css-flexbox-1/
w3c-그리드 : https://www.w3.org/TR/css-grid-1/
CSS Grid Layout Module Level 1
Clarified that fit-content() is not affected by stretch align-content/justify-content. (Issue 1732) Represents the formula min(max-content, max(auto, argument)), which is calculated like similar to auto (i.e. minmax(auto, max-content) ) , except that the t
www.w3.org
CSS Flexible Box Layout Module Level 1
Adjusted min-width: auto to only apply the computed main size as a minimum in cases where the flex basis was retrieved from the main size property. (Issue 19) … is defined if the item’s computed flex-basis is auto and its computed main size property is
www.w3.org
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-column
The grid-column CSS shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
developer.mozilla.org
CSS 그리드 레벨2: 서브그리드 - Webactually
CSS 그리드 명세 레벨 2의 핵심 내용, 서브그리드(subgrid)란 무엇인가? 그 기능과 사용법에 대해서 레이철 앤드루가 이야기합니다.
webactually.com
저도 아직 grid의 속성 및 사용법에 대해서 다 숙지를 하지 못한 상태인데 grid에 대해서 하나씩 하나씩 포스팅을 하면서 grid를 숙달 할 계획 입니다.
그밖의 display 속성 정리 포스팅 글
'html, css/css-display속성들 정리' 카테고리의 글 목록
현재 프리랜서로 프로젝트를 하고 있는 웹퍼블리셔 입니다. 프로젝트하면서 알게된 것들 공부하면서 알게 된 것들을 정리 하고 있습니다.
sh-sida.tistory.com