CSS Grid 는 지금 사용가능한가?

§

이글 역시 튜토리얼 참여자분의 질문글에 대한 답변입니다. ㅎㅎㅎ

http://caniuse.com/#feat=css-grid

결론부터 말씀드리자면, 천조국에서는 써도 됩니다. 데스크탑에서는 마소의 IE, 그리도 Edge 만 완벽히 지원이 되지 않을뿐, 크롬, 파폭, 사파리, 오페라 모두 안전하게 사용하실 수 있습니다. 마소 도 지금 grid 를 완벽하게 지원하기 위해서 작업 중 이고, 아마 올해 말 까지는 완벽하게 지원해줄 겁니다.

https://developer.microsoft.com/en-us/microsoft-edge/platform/status/gridupdate/?q=grid%20update

모바일은 지원이 안되는 브라우져들이 있지만, 모바일 뷰에서 grid 쓸일 있나요? ㅎㅎㅎㅎ

CSS Grid 는 왜 사용해야 하는가?

레이아웃은 원래 flexbox 로 짜는거 아니였나요? Flexbox 쓰면 되지 왜 CSS Grid 를 써야 하죠? 라는 의문을 갖게 되시는 개발자 분들도 있으실텐데,

1. performance

flexbox 는 코딩하는 입장에서는 float 모델보다 더 간단하지만, 이 flexbox 는 브라우져에게 사실 많은 계산을 요구하고 있는 겁니다. 그래서 flexbox 로 짜여진 레이아웃의 로딩속도는 css grid 로 짜여진 레이아웃 로딩속도보다 조금 더 느립니다. (아주 차이가 크게 나는건 아닙니다. 미세한 차이가 납니다.)

2. 매우 복합적인 레이아웃을 쉽게 구성

flexbox 로도 물론 대다수 레이아웃을 구현할 수 있지만, 어떤 특수한, 또는 매우 복합적인 레이아웃 구축에는 현실적인 솔루션이 되지 못합니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

“저거 flexbox 로도 짤수 있거든” 이라고 하면서 발끈해서 그걸 또 flexbox 로 짜는 개발자 (미국개발자) 도 본적이 있는데, why? Why do that?

뭐하러? 단지 flexbox 로도 가능하다는걸 증명하기 위해서?

상황에 따라서 flexbox 건 css grid 건 편한쪽으로 선택해 코딩을 하면 되는거지, 그걸 죽어라고 flexbox 로만 짜는건 현명한 코더가 아니라고 생각됩니다.

CSS Grid 에 대해 참조하실만한 글들:

https://premium.wpmudev.org/blog/css-grid-system/
https://css-tricks.com/snippets/css/complete-guide-grid/ (이거 영어가 조금 되시면 댓글 보시면서 LOL 하실듯요. ㅋㅋㅋ)

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: ,

카테고리: ,

Ω

1 Comment

  • Estoque says:

    CSS 그리드 얼른 써보고 싶은데 아직도 핼조선은 멀고도 험합니다. ㅠㅠ

    flexbox보다 더 재밌는 일을 많이 할 수 있을것 같은데 방대한 reference를 보고 있으면 이걸로 도무지 뭘해야 할지 감이 안 와서 고민입니다.

Leave a Reply

Your email address will not be published. Required fields are marked *