CSS 그리드 레이아웃

CSS grid layout
CSS 그리드
CSS 그리드 레이아웃 모듈 레벨 1
CSS Floated Layout.png
CSS 플로트를 사용한 일반적인 웹 페이지 레이아웃 묘사.
약어그리드, 그리드 레이아웃
네이티브 이름
CSS 그리드 레이아웃 모듈 레벨 1
상태W3C 후보 추천서 초안
초간출판2007년 4월 7일(2007-04-07)[1]
최신 버전레벨 1
2020년 12월 18일(2020-12-18)[2]
미리보기 버전레벨 2
2021년 3월 11일(2021-03-11)[3]
조직W3C
위원회CSS 작업 그룹
편집자
  • 탭 앳킨스 주니어
  • 엘리카 J. 에테마드
  • 로센 아타나소프
  • 오리올 브루파우
  • 알렉스 모길렙스키
  • 필 쿱
  • 마르쿠스 미엘케[4][5]
[3]
기준 표준CSS
도메인CSS
웹사이트www.w3.org/TR/css-grid-1/
계단식 스타일 시트
개념
철학
도구들
비교

Cascading Style Sheets에서 CSS 그리드 레이아웃 또는 CSS 그리드는 브라우저 전체에서 보다 쉽고 일관성 있게 복잡한 응답 웹 설계 그리드 레이아웃을 생성한다.[6]역사적으로, 웹 페이지 레이아웃 방법을 제어하는 다른 방법들, 예를 들어 테이블, 플로트, 그리고 최근에는 CSS 플렉시블 박스 레이아웃(Flexbox)이 있다.CSS 그리드는 현재 모든 주요 브라우저의 최신 버전에서 채택되었지만, 현재 공식적인 표준은 아니다([7]W3C 후보 추천).

동기

CSS 그리드는 CSS float와 같은 이전의 옵션보다 더 강력하고 유연한 레이아웃을 만들 수 있다.그것은 또한 브라우저 전체에서 작동하는 더 표준화된 코드를 허용한다.이는 특정 브라우저 해킹이나 복잡한 해결책에 의존하는 것과는 대조적이다.[2]

CSS에서 플로트를 이용하는 것의 한 가지 문제는 콘텐츠가 페이지의 한 부분에 추가될 경우 페이지의 흐름을 방해하고 레이아웃을 파괴할 수 있다는 것이다.이는 배치 요소의 높이가 다르기 때문이다.[2]CSS flex box는 유연한 레이아웃을 지원하고 복잡한 레이아웃을 만들 수 있는 유연성을 제공하지만, 2차원 공간에서 반응하는 레이아웃을 만들 필요가 생기면 실패한다.

역사

CSS를 위한 그리드 레이아웃의 첫 번째 포괄적인 초안은 Phil Cupp에 의해 2011년에 마이크로소프트에 의해 만들어졌고, 인터넷 익스플로러 10에서 뒤에 구현되었다.-ms- 벤더 접두사이 구문은 주로 Elika Etemad와 Tab Atkins Jr.에 의해 주도된 CSS Working Group의 몇 개 연동을 통해 재구성되고 더욱 정제되었다.이 특징은 주로 레이첼 앤드류, 젠 시몬스가 이끄는 전도 이후 웹 개발자들에 의해 널리 채택되었다.[8]

브라우저 지원

2017년 10월 현재 Chrome, Firefox, Safari, Edge는 모두 벤더 접두사 없이 CSS 그리드를 지원한다.[9][10][11]IE 10과 11은 CSS 그리드를 지원하지만 규격이 오래된 것이다.모바일에서는 Opera Mini와 Brave Browser를 제외한 모든 현대 브라우저가 CSS 그리드를 지원한다.구형 브라우저를 대상으로 하는 웹 개발자는 Modernizr 3.5.0을 활용해 필요에 따라 웹페이지를 감지해 우아하게 저하시킬 수 있다.[12]

프레임워크의 활용률

테일윈드 CSS는 요소들의 크기 조정과 배치 방법을 제어하기 위해 CSS 그리드를 유틸리티에 통합한다.[13]그러나 다른 많은 현재의 웹 프레임워크는 부트스트랩 4와 파운데이션 6과 같은 CSS 그리드를 통합하지 않는다.[14]

fr 유닛

"fr" 유닛은 종종 CSS 그리드 레이아웃과 함께 사용된다.[15][16][17]CSS 그리드 배치 규격의 일부인 "fr" 단위는 그리드 컨테이너에 남아 있는 공간의 일부분을 나타낸다.[2]

예

"홀리 그레일" 레이아웃

다음은 "성스러운 그레일" 레이아웃의 예다.

HTML 출력
<<html>> <스타일> div { 테두리: 1px solid; } body { display: grid, grid-interflict: 10em auto 10em; grid-inflict-inflict:"하드 헤더" "왼쪽 가운데 오른쪽" "바닥글 바닥글"; } </스타일> <바디> <div style="그리드 영역: 헤더">헤더</div> <div style="그리드 영역: 바닥글">바닥글</div> <div style="그리드 영역:왼쪽">왼쪽 패널 </div 스타일="그리드 영역: 중간; 높이: 200px">주 내용 영역 </div> <div style="그리드 영역: 오른쪽">오른쪽 패널 </div> </html>
 CSS Grid Holy Grail Layout

값표

다음은 값 표의 예다.

HTML 출력
<html> <스타일>.wrapper { display: grid; grid-template-columns: 1fr 1fr, grid-gap: 0.5em; }div { border: 1px solid; }</style> <div class="> <h3<h3>머리글2</h3><h3>Header3<, /h3>,<>div>, value11<, /div>,<>div>, value12<, /div>,<>div>, value13<, /div>,<>div>, value21<, /div>,<>div>, value22<, /div>,<>div>, value23<, /div>,<>div>, value31<, /div>,<>div>, value32<, /div>,<>div>, value33<, /div>,<>div>, value41<, /div>,<>div>, value42<, /div&g.t,<>div>, value43<, /div>,<>div>, value51<, /div>,<>div>, value52<, /div>,<>div>, value53<, /div>,<>div>, value61<, /div>,<>div>, value62<, /div>,<>div>, value63<, /div>,<>div>, value71</div> value72</div> value73 </div> </div> </div> </div> </div></div> </div>></div></div>
 A simple implementation of the CSS Grid layout demonstrating a table layout

참조

  1. ^ "CSS Grid Layout Module Level 1 Publication History - W3C". W3C. n.d. Retrieved 2021-04-09.
  2. ^ a b c d Atkins Jr., Tab; J. Etemad, Elika; Atanassov, Rossen; Brufau, Oriol; Mogilevsky, Alex; Cupp, Phil; Mielke, Markus, eds. (2021-12-18). "CSS Grid Layout Module Level 1". W3C. W3C Working Group. Retrieved 2021-04-09.
  3. ^ a b Atkins Jr., Tab; J. Etemad, Elika; Atanassov, Rossen; Brufau, Oriol; Mogilevsky, Alex; Cupp, Phil; Mielke, Markus, eds. (2021-03-11). "CSS Grid Layout Module Level 2". W3C. CSS Working Group. Retrieved 2021-04-09.
  4. ^ Mogilevsky, Alex; Cupp, Phil; Mielke, Markus; Glazman, Daniel, eds. (2011-04-07). "Grid Layout". W3C. CSS Working Group. Retrieved 2021-04-09.
  5. ^ Mogilevsky, Alex; Mielke, Markus, eds. (2007-09-05). "CSS Grid Positioning Module Level 3". W3C. CSS Working Group. Retrieved 2021-04-09.
  6. ^ "CSS Grid – Table layout is back. Be there and be square". Google Developers. January 2017. Retrieved 2021-04-09.
  7. ^ "CSS Grid Layout (level 1) Can I use... Support tables for HTML5, CSS3, etc". caniuse.com. Retrieved 2022-01-12.
  8. ^ Gustafson, Aaron (2017-10-19). "The Story of CSS Grid, from Its Creators". A List Apart. Retrieved 2022-01-12.
  9. ^ Anderson, Kareem (13 September 2017). "Microsoft's newest browser gets a significant boost with EdgeHTML 16". Retrieved 7 October 2017.
  10. ^ Protalinski, Emil (9 March 2017). "Chrome 57 arrives with CSS Grid Layout and API improvements VentureBeat". VentureBeat. Retrieved 7 October 2017.
  11. ^ "CSS Grid Layout". Can I Use. n.d. Retrieved 2021-04-09.
  12. ^ Ateş, Faruk (2017-04-13). "Modernizr 3.5.0". Modernizr News. Retrieved 2021-04-09.
  13. ^ "Grid Column Start / End - Tailwind CSS". Retrieved 2021-04-13.
  14. ^ Goetter, Raphael (2017-02-16). "Flexbox grids and frameworks". GitHub Gist. Archived from the original on 2017-02-16. Retrieved 2021-04-09.
  15. ^ Alligator.io (2020-09-03). "CSS Grid Layout: The Fr Unit". DigitalOcean. DigitalOcean. Retrieved 2021-04-09.
  16. ^ Marcotte, Ethan (2018-07-18). "Fractional. — Ethan Marcotte". Ethan Marcotte. Retrieved 2021-04-09.
  17. ^ Rendle, Robin (2017-06-12). "An Introduction to the 'fr' CSS unit". CSS-Tricks. Retrieved 2021-04-09.

외부 링크