디자인 모형 일치하는 일부 CSS 그리드 전략

웹 개발의 세계는 항상 설계-개발 핸드 오프 사이에 차이가있었습니다. 야심 찬 디자이너는 독특하고 아름답게 보이려는 노력의 최종 결과를 원하지만 많은 개발자는 일관되고 신뢰할 수 있으며 견고하고 견고한 (및 코드가 쉽게) 결과에서 더 많은 가치를 찾습니다. 이 역학은 양측 사이에 지속적인 긴장을 초래할 수 있습니다. 양 당사자는 자신의 방식으로 물건을 조종하려고합니다.

이 상황은 어느 정도 피할 수 없지만 새로운 프론트 엔드 기술은 양측을 더 가깝게 만드는 데 중요한 역할을 할 수 있습니다. 그러한 기술 중 하나는 CSS 그리드입니다. 이 게시물은 디자인 레이아웃을 높은 수준의 충실도 (두통없이)에 맞추는 CSS 스타일을 작성하는 데 사용될 수있는 방법을 탐구합니다.

디자이너가 프론트 엔드 개발자에게 지침을 제공하는 일반적인 방법은 디자인 모형입니다 (모형으로는 스케치, XD, 일러스트 레이터, Photoshop 등에 구축 된 결과물에 대해 이야기하고 있습니다). 모든 디자이너는 개발자와 마찬가지로 어느 정도 다르게 작동하지만 많은 사람들은 어떤 종류의 그리드 시스템에 레이아웃의 구조를 기반으로하는 것을 좋아합니다. 일관된 그리드 시스템은 웹 페이지를 코딩하는 방법과 사용자 화면의 크기가 모형과 다른 경우 응답 방법을 통신하는 데 매우 중요합니다. 개발자로서, 나는 잘 생각 된 그리드 시스템을 채택하는 데 어려움을 겪는 디자이너들에게 정말 감사합니다.

12 열 레이아웃은 특히 인기가 있지만 다른 패턴도 일반적입니다. Sketch 및 XD와 같은 소프트웨어는 사전 설정 열 레이아웃을 따르는 페이지를 만들 수 있습니다. 버튼 클릭으로 오버레이를 켜고 끌 수 있습니다.

그리드 시스템이 구현되면 대부분의 설계 요소는 그 안에 정사각형으로 배치되어야합니다. 이 접근법은 모양이 고르게 줄을 서서 더 매력적인 외관을 만듭니다. 예측 가능한 그리드는 시각적으로 매력적 일뿐 만 아니라 개발자에게 스타일을 작성할 때 촬영할 수있는 독특한 대상을 제공합니다.

불행히도,이 기본 패턴은 정확하게 코딩하기가 어려울 수 있습니다. Bootstrap과 같은 프레임 워크는 종종 그리드 레이아웃을 만드는 데 사용되지만 페이지 무게가 추가 및 세밀한 제어 부족과 같은 단점이 있습니다. CSS Grid는 프론트 엔드 완벽 주의자에게 더 나은 솔루션을 제공합니다. 예를 살펴 보겠습니다.

위의 디자인은 그리드에 대한 좋은 응용 프로그램입니다. 여러 요소가 그 안에 위치한 14 열 패턴이 있습니다. 상자의 너비와 오프셋이 다르지만 모두 동일한 그리드를 준수합니다. 이 레이아웃은 Flexbox로 만들어 질 수 있으며 심지어 부유물도 만들 수 있지만 모든 중단 점에서 픽셀-완벽한 결과를 얻기 위해 매우 구체적인 수학이 포함될 수 있습니다. 그리고 직면합시다 : 많은 프론트 엔드 개발자들은 인내심을 가지고 있지 않습니다. 이런 종류의 작업을보다 쉽게 ​​수행하기위한 세 가지 CSS 그리드 레이아웃 전략을 살펴 보겠습니다.

전략 1 : 기본 그리드

균등하게 간격을 둔 12 열 레이아웃을 작성하는 가장 직관적 인 방법은 아마도 이것의 변형 일 것입니다. 여기서 외부 용기는 왼쪽 및 오른쪽 패딩으로 외부 거터 간격을 제어하는 ​​데 사용되며 내부 행 요소는 내용을 최대 너비로 제한하는 데 사용됩니다. 행은 그리드 관련 스타일을받습니다.

 디스플레이 : 그리드;
그리드-템플릿-컬럼 : 반복 (12, 1fr);
그리드 갭 : 20px;

이 규칙은 그리드가 12 개의 열로 구성되며 각각은 하나의 분수 단위 (FR)의 폭을 갖습니다. 열 사이의 20px 간격도 지정됩니다. 열 템플릿 세트를 사용하면 그리드 컬럼 속성을 사용하여 모든 하위 열의 시작 및 끝을 매우 쉽게 설정할 수 있습니다. 예를 들어, 그리드-컬럼 : 3/8 위치 설정 요소는 열 3에서 시작하고 8 열을 가로 질러 5 개의 열을 열을 8 열을 가로 지릅니다.

이 예제에서 CSS 그리드가 제공하는 내용에서 이미 많은 가치를 볼 수 있지만이 접근법은 몇 가지 제한 사항이 있습니다. 한 가지 문제는 그리드 갭 속성을 지원하지 않는 Internet Explorer입니다. 또 다른 문제는이 12 열 접근법이 갭이 시작될 때 간격 또는 종료 열에서 열을 시작하는 능력을 제공하지 않는다는 것입니다. 이를 위해서는 다른 시스템이 필요합니다.

전략 2 :보다 유연한 그리드

그리드 갭은 IE에 대한 것이 아니지만, 그리드 템플릿 자체의 일부로 공간을 포함시킴으로써 갭의 모양을 재현 할 수 있습니다. 그리드-템플릿-컬럼에 사용할 수있는 반복 함수는 단일 열 폭을 인수 로서만 수용 할뿐만 아니라 임의 길이의 반복 패턴을 허용합니다. 이를 위해, 열-갭의 패턴을 11 번 반복 할 수 있고, 최종 열을 삽입하여 12 열 / 11 내부 갭 레이아웃을 완료 할 수있다.

 그리드-템플릿-컬럼 : 반복 (11, 1fr 20px) 1fr;

이것은 IE 문제를 해결하고 열을 시작하여 열이나 간격 모두에서 종료 할 수 있습니다. 이전 방법에 비해 잘 개선되었지만 여전히 성장할 여지가 있습니다. 예를 들어, 열이 화면의 바깥 쪽 가장자리에 스패닝되고 다른 측면이 그리드 시스템 내에 맞는 경우 어떻게해야합니까? 예는 다음과 같습니다.

이 레이아웃에서 카드 (왼쪽 열)는 그리드 내에서 시작하여 종료됩니다. 기본 이미지 (오른쪽 열)는 그리드 내에서도 시작되지만 그리드를 넘어 화면 가장자리까지 확장됩니다. 이를 위해 CSS를 작성하는 것은 도전이 될 수 있습니다. 한 가지 방법은 이미지를 절대적으로 배치하고 오른쪽 가장자리에 고정하는 것이지만, 이는 문서 흐름에서 벗어나는 단점과 함께 제공됩니다 (이미지가 카드보다 키가 큰 경우 문제가 될 수 있음). 또 다른 아이디어는 Floats 또는 Flexbox를 사용하여 문서 흐름을 유지하는 것이지만, 이는 너비를 얻고 간격을 바로 얻기 위해 까다로운 일회성 계산을 수반합니다. 더 나은 방법을 살펴 보겠습니다.

전략 3 : 훨씬 더 유연한 그리드

이 기술은 마지막 개정판에서 소개 된 아이디어를 바탕으로합니다. 이제 거터 크기와 행 너비를 정의하는 다른 요소 내에 그리드가 존재하는 대신 그리드의 패턴과 해당 공간을 통합하고 있습니다. 홈통, 열 및 갭은 모두 템플릿에 통합되므로 자식 요소는 그리드-열 속성을 사용하여 그리드에 쉽고 정확하게 배치 될 수 있습니다.

 $ row width : 1140px;
$ 거터 : 30px;
갭 : 20px;
$ break : $ row-width 2 * $ gutter;
$ col-width-post-break : ($ row-width-11 * $ 갭) / 12;
  
.Container {
  디스플레이 : 그리드;
  그리드 - 템플릿 - 컬럼 : $ 거터 반복 (11, calc ((100% -2 * #{$ gut
  @Media 화면 및 (min-width : #{$ break}) {
    그리드-템플릿-컬럼 : calc (0.5 * (100%- #{$ row-width})) 반복 (11, #{$ col-width- post-break} #{$ gap}) #{$ col-width-post-break} calc (0.5 * (100%- #{$ low-width});
  }
}

예, 이것을 제대로 얻으려면 일부 수학이 필요합니다. 행의 최대 너비 전후에 템플릿을 다르게 설정하는 것이 중요합니다. 변수를 정의하면 계산을 훨씬 더 관리하기 쉽게 만들 수 있기 때문에 SCSS를 사용하기로 결정했습니다 (다른 개발자에게는 더 읽기 쉬운 언급이 아닙니다). 12 부 패턴으로 시작한 것은 11 개의 내부 갭을 통합하여 23 부 패턴으로 증가했으며 이제 왼쪽과 오른쪽 거터를 차지하는 25 개 조각입니다.

이 접근법의 한 가지 멋진 점은 패턴이 설정되면 그리드를 준수하는 모든 레이아웃의 기초로 사용될 수 있다는 것입니다. 더욱이, 그것은 고품질 모형으로 전달 될 수있는 디자인을 정확하게 구현하는 간단한 방법으로 사용됩니다. 그것은 개발자와 디자이너 모두를 행복하게 만드는 것입니다!

몇 가지 경고가 있습니다…

이러한 기술은 전통적으로 어색한 스타일 문제를 해결하는 데 사용될 수 있지만은 총알이 아닙니다. 대신, 올바른 응용 프로그램에 사용되는 대체 도구로 생각해야합니다.

두 번째 및 세 번째 레이아웃 패턴이 적합하지 않은 상황 중 하나는 자동 배치가 필요한 레이아웃입니다. 다른 하나는 CSS 그리드로 잘 작동하지 않는 브라우저를 지원 해야하는 생산 환경입니다.

위 내용은 디자인 모형 일치하는 일부 CSS 그리드 전략의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!