CSS 그리드 패션 유연한 레이아웃

Feb 20, 2026

어떻게

A woman sits at a laptop tweaking a CSS Grid layout

CSS Grid는 행과 열의 두 축 레이아웃을 만드는 데 적합합니다. 구문은 간단하고 페이지 레이아웃을 산들 바람으로 만듭니다. 여러 개의 중첩 된 컨테이너가 필요한 레이아웃은 이제 CSS에서 간단히 설명 할 수 있습니다.

그리드는 '디스플레이'속성에 '그리드'값을 적용하면 다른 레이아웃 속성과 다르게 작동합니다. 이러한 요소는 이제 그리드 항목이며 상위에 설정 한 규칙에 따라 배치됩니다 (특별히 배치되지 않는 한).

그리드와 함께 그립 섭취하십시오

그리드는 여러 가지 새로운 기능을 가져옵니다.

그리드 갭

여백을 사용하는 대신 그리드는 그리드 항목 간의 갭을 정의 할 수있는 자체 속성을 가지며 그리드의 레이아웃을 정의하고 틈에 대해 정의 할 수 없습니다. Grid Systems (이누이트 및 트위터 부트 스트랩에서 발견 된 것과 같은)는 일반적으로 모든 것을 정확하게 정렬하기 위해 부정적인 여백을 설정하는 것에 의존합니다.

FR 유닛

분수의 경우,이 새로운 측정 단위는 갭이 있거나없는 레이아웃을 분수로 분할하는 데 사용됩니다.

그리드 배치

CSS Grid는 다른 모든 항목 앞에 모든 요소를 그리드의 어느 곳에서나 우선 순위 지정 및 위치 지정할 수 있으며 다른 모든 항목이 자동으로 배치됩니다.

격자 영역 및 템플릿

그리드의 명명 된 영역이 정의되어 거의 ASCII 패션의 레이아웃을 정의 할 수 있습니다.

최소 최대()

'minmax ()'속성 값을 사용하면 격자 항목, 열 및 행의 최소 및 최대 크기를 적용 할 수 있습니다. 이 기능은 FlexBox 및 CSS의 다른 모든 레이아웃 모듈에서 슬프게도 누락되었습니다.

그리드를 만드십시오

CSS 그리드의 강력한 영역 및 템플릿을 사용하면 복잡한 레이아웃을 쉽게 수행 할 수 있습니다. '그리드 영역'속성을 사용하여 그리드 내의 요소에 이름을 적용하여 시작합니다. 예 : '헤더 {그리드 영역 : 헤더]; } '. 그리드의 모든 영역을 모두 지정하면 '격자 템플릿 영역'속성을 사용하여 레이아웃을 설명합니다.

 그리드 - 템플릿 - 영역 :
  "헤더 헤더 헤더"
  "왼쪽 사이드 바 기사 오른쪽 사이드 바"
  "바닥 글 꼬리말 바닥 글"
;

위의 코드 예제는 3 x 3 그리드를 설명합니다. 여러 열이나 행을 확장 할 때 그리드 항목의 이름을 반복합니다. 다른 크기의 화면의 그리드 레이아웃을 변경하려면 미디어 쿼리를 사용할 수도 있습니다.

그런 다음 새 'fr'유닛을 사용하여 폭이 다른 열 사이에서 분리되는 방법을 정의 할 수 있습니다.

 그리드 - 템플릿 열 : 1FR 3FR 1FR;

위에 표시된 예제는 사용 가능한 너비를 5 개의 동일한 폭 값으로 분할합니다. 즉, 첫 번째 열에 1/5, 두 번째 열에 3/5 및 최종 열에 최종 5 번째로 적용됩니다.

행을 크기를 지정하려면 새 'minmax'속성 값을 사용하여 상단 및 하단 열을 해당 콘텐츠로 크기를 지정한 다음 중간 행이 그리드의 나머지 공간을 확장하도록 허용합니다.

 그리드 - 템플릿 행 :
  minmax (최소 내용, 최대 - 내용)
  자동으로
minmax (최소 함량, 최대 - 내용);

이 기사는 원래 Creative Web Design Magazine Web Designer의 문제 271에 게시되었습니다. 구입 문제 271. 또는 웹 디자이너를 구독하십시오 ...에

CSS 그리드 기술을 강화하고 싶습니까?

Brenda Storer is giving her talk Using CSS Grid in the Real World at Generate New York from 25 - 27 April 2018 — Brenda Storer는 2018 년 4 월 25 일부터 25 일까지 뉴욕을 생성하는 현실 세계에서 CSS 그리드를 사용하여 그녀의 이야기를 제공하고 있습니다.

Brenda Storer는 2017 년 3 월에 브라우저에 대한 초기 릴리스 이후 브렌지 스토어가 소프트웨어 개발 기관에서 디자이너 및 프런트 엔드 개발자로서 사용해 왔으며 큰 팬입니다.

그녀의 이야기에서 2018 년 4 월 25-27 일부터 뉴욕을 생성합니다 또한, Brenda는 CSS 그리드로 사이트를 점진적으로 향상시키고 이전 브라우저에 대한 방탄 대 방향을 작성하는 방법을 보여줍니다 (또는 현재 그리드 프레임 워크를 대체로 사용하십시오). ...에

2018 년 4 월 25-27 일부터 뉴욕을 창출합니다. 지금 티켓을 가져 가라 ...에

관련 기사:

CSS 그리드 레이아웃 비밀이 드러났습니다
CSS 눈금으로 응답 성 레이아웃을 만듭니다
CSS 눈금으로 최대 속도를 얻으십시오

CSS 그리드 패션 유연한 레이아웃

그리드와 함께 그립 섭취하십시오

그리드를 만드십시오

CSS 그리드 기술을 강화하고 싶습니까?

어떻게 - 가장 인기있는 기사

LINO PRINTMAKING : 소개

InDesign에서 특별한 인쇄 마감재 생성

CSS 그리드로 응답 성 레이아웃 생성

대화 형 3D 타이포그래피 효과

설득력을 칠하는 방법

오일에서 초상화를 칠하십시오

현실적인 주름과 접기로 3D 옷을 만듭니다

3D 렌더링에서의 움직임을 캡처하는 방법

카테고리