CSS 그리드 레이아웃 - 교차 섹션 (CSS Grid layout — crossed sections)

이 글은 Rafaela Ferro CSS Grid layout — crossed sections 글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다.

실용적인 예를 통해 CSS Grid와 그 잠재력에 대한 소개

CSS 그리드의 첫 만남은 레이첼 앤드류 (Rachel Andrew)와의 대화에서 시작했다. 나는 그리드가 해결하는 문제와 그리드가 만들어 낼 수있는 가능성에 매료되었다. 나는 그걸 가지고 놀았고 오늘은 CSS 그리드없이 구현할 수있는 레이아웃 시나리오를 보여주려고 합니다 - intertwined sections있는 레이아웃.
이 글은 끝내주는 튜토리얼이 아니기 때문에 각 CSS 속성을 자세히 살펴 보지 않겠습니다. 대신 끝에 링크를 남겨 두어 여기에서 사용하는 속성에 대한 자세한 문서를 확인할 수 있습니다.

The layout 🐾

레이아웃 예제의 경우, 개를 위한 가상의 소셜 네트워크를 사용합니다 (강아지는 새로운 개를 만나기를 원합니다). 각 프로필에 대해 우리는 name, pupper에 대한 info, photo (당연히! 😍), bioachievements (트로피 🏆처럼, 자격이 있음)을 보고 싶습니다.
어떤 이유에서 이 매우 유용한 플랫폼 뒤에 디자이너가 프로필 페이지에 이상한 배치를 원한다고 가정 해 봅시다. 자원 봉사자인 Lola를 만나십시오.
presentation
Icons made by Freepik from www.flaticon.com.
지금까지, 당신은 이 blog post가 나의 귀여운 pupper를 자랑하는걸 알수있다. 개가 마음에 들지 않는 사람들을 위해 (냉정한 고양이 사람 😒), 나는 CSS도 가져왔다.

The grid skeleton

물론 필요에 따라 각 페이지 나 구성 요소를 구성하기 위해 그리드를 정의 할 수있는 방대한 수의 방법이 있습니다. 여기에 간단한 예제가 필요하므로 다음과 같은 구조를 사용합니다 :
presentation
3 rows. 4 columns. Easy peasy lemon squeezy.
Sketch로 매우 쉽게, 그리고 역시 CSS 그리드로 작업하기 쉽습니다. CSS CSS 그리드없이 어떻게 할 수 있습니까? 재미있는 해결책을 찾으면 알려주세요!

Grid container

가장 먼저해야 할 일은 컨테이너(container)를 설정하는 것입니다. 컨테이너는 열(columns), 행(rows), 간격(gaps), 영역(areas) 등 그리드 자체를 정의하는 곳입니다. 그래야만 그 항목이 그리드에 배치됩니다. 이는 우리가 지금까지 해왔 던 것과는 다른 것입니다. 우리는 그리드의 aspect를 만들기 위해 항목에 크기(sizes)와 여백(margins)을 설정하는 데 익숙합니다.
첫 번째 우선 순위 : 그리드로 표시합니다. 기본적으로 그리드에는 1개의 열(column)만 있기 때문에 변경 사항이 즉시 표시되지 않습니다. 일부 열(column)을 만들고 변경 사항을 봅니다.
presentation
repeat (4, 1fr)를 사용하거나 모두 쓸 수 있습니다 : 1fr 1fr 1fr 1fr. repeat 할 수도 있습니다 (2, 1fr 1fr) ¯ \ _ (ツ) _ / ¯
기본적으로 각 그리드 항목은 순서대로 하나의 셀(cell)에 배치됩니다.
fr unit은 해당 항목이 차지하고있는 나머지 공간의 비율을 나타냅니다. % 및 px와 같은 다른 단위와 결합 할 수 있습니다.
presentation
columns의 수, 항목 간 여백(margin) 크기 등을 고려하면서 더 이상 비율로 계산할 필요가 없기 때문에 좋습니다. 남은 전체 공간과 항목 사이에 설정 한 간격에 따라 조정됩니다.
또한 행(rows)을 최소 100px로 설정합니다 (요소를 배치하기 시작할 때 그리드를 더 잘 볼 수 있습니다). 그러나 일부 개가 생물에 전체 책을 쓰려고 결정한 경우에 대비하여 행(rows)의 높이가 콘텐츠 크기에 따라 증가되기를 바랍니다.
이 결과를 위해 우리는 minmax () 함수로, 최소 값은 100px이고 최대 값은 max-content입니다. max-content를 사용하면 div 콘텐츠를 수용하도록 확장됩니다.
  • Max-content: 그리드 트랙을 차지하는 그리드 아이템의 max-content 기여도를 나타냅니다. [1]
  • intrinsic preferred width입니다. [2]
presentation
자, 그 차이. 우리는 모든 것을 너무 가깝게 지키고 싶지 않습니다. 밀실 공포증입니다! 모든 간격을 10px로 설정했지만 grid-row-gapgrid-column-gap에 다른 값(values)을 지정할 수 있습니다.
presentation
간격이 그리드 안에 만 나타나고 주위에 공간을 추가하지 않는다는 것을 알았을 수도 있습니다. 이를 위해 margins을 설정할 수 있습니다 (결국 margins이됩니다). 그리고 500px로 설정하더라도 틈(gaps)에 요소를 삽입 할 수 없습니다. 그들은 틈(gaps)이있어서 도움이됩니다. 필요한 경우 열(columns)을 추가하십시오.

Positioning items on the grid

presentation
컨테이너(container)가 모두 준비되었으므로 이제는 콘텐츠를 배포 할 차례입니다.
그러나 먼저 그리드의 항목 배치가 트랙이 아닌 그리드 선(grid lines)을 기반으로한다는 것을 알아야합니다. 우리의 그리드는 4 열(columns)과 3 행(rows)을 가지고 있으며 5 개의 수직선(vertical lines)과 4 개의 수평선(horizontal lines)을 가지고 있습니다. 섹션이 전체 행을 차지하는 경우 섹션은 1 행(columns)에서 5 행(columns)까지 이동합니다.
다음과 같은 속성을 가진 항목을 배치 할 수 있습니다.
  • grid-column: column-start / column-end;
  • grid-row: row-start / row-end;
presentation
배치되지 않은 요소(elements)가 셀(cells)을 어떻게 이동하는지 확인 했습니까?
또는, 속기(shorthand)를 위해 :
  • grid-area: row-start / column-start / row-end / column-end;
presentation
grid 격자에 주석을 달면 여백(margins)을 사용하지 않고도 레이아웃에 빈 공간이 생깁니다.
그리고 당신이 확실히 탐구해야하는 많은 다른 방법들. 그리드에 항목을 배치 할 수있는 방법을 너무 많이 파고 들지는 않겠지 만 자세한 내용은이 글(read this)을 읽으십시오. 편리한 "트릭"이 몇 가지 있습니다.
예를 들어, 트로피를 어떻게 배치했는지 살펴보십시오. ⬇️
presentation
-1?! 대체 어디야?
줄(lines)을 거꾸로 셀 수 있습니다. 행(rows) / 열(columns)의 개수를 모를 때 유용합니다. 이 경우 그리드에 행을 추가하는 경우에도 마지막 행까지 항상 트로피 섹션을 유지해야합니다.
presentation
마지막 줄은 줄 수에 관계없이 -1입니다.

The juicy bits

좋아, 이제 우리는 콘텐츠 삽입을 시작할 수 있습니다!
presentation
그녀는 사랑스럽지 않아?
이제 minmax () 함수를 사용하여 내용을 수용하기 위해 행을 늘리는 방법을 볼 수 있습니다. max-content 값(value)을 갖는 함수).
트로피 및 정보 섹션에서는 Flexbox 레이아웃을 사용합니다. 그리드는 Flexbox의 대체품이 아니며 여러 가지 공통점이 있지만 각기 다른 상황에서 사용해야합니다. CSS Grid는 2 차원 레이아웃을 위해 설계되었지만 (우리의 반짝이는 새 장난감이며 멋지다) CSS 플렉스 박스는 1 차원 레이아웃 (또는 스크린이 무한대 인 경우 1 차원이 될 레이아웃)에 더 강력합니다.
presentation
다음은 Grid가 Flexbox보다 더 잘 작동하는 경우입니다.
Making literal grids. 🙃
  • columns, rows 및 gutters가있는 컨테이너(container)가 필요할 때마다. 날 믿어, fr grid-gap은 가장 좋은 친구 야. width: calc(100%/7 * 2 — 10px) 에 작별 인사를하십시오 악몽!
Page layouts.
  • 첫째, 페이지는 일반적으로 2차원 레이아웃입니다. 당신은 Flexbox만 사용한다면이 개 소셜 네트워크를 재현하는 것이 더 힘들 것입니다. 그리고 puppers가 친구를 사귈 때 어떤 일도 일어나지 않아야합니다!
  • 또한 Flexbox를 사용하면 내용에 따라 레이아웃이 결정됩니다 (요소의 크기를 조정하여 그리드를 생성 할 수 있습니다). Grid를 사용하면 컨테이너가 레이아웃을 지정합니다. 따라서 Grid는 페이지가로드되는 동안 상황이 "뛰어"오르지 않기 때문에 느린 연결에서 더 잘 작동합니다 (예제 참조-see an example).
  • Grid는 종종 minmax(), repeat()auto-fill 덕분에 Flexbox와 동일한 응답 결과를 얻기 위해 미디어 쿼리를 적게 (또는 전혀) 요구하지 않습니다. 여기 보너스 포인트 많이, 그리드가는 방법! 🙌
그래서, 당신은 그들을 결합 할 수 있습니다. 그리드 항목은 플렉스 컨테이너(Flex containers)가 될 수 있으며 그 반대의 경우도 있습니다. 참고 : 예, Flex 대신 Grid를 사용하여 1D 레이아웃의 트로피 및 정보를 얻을 수 있지만, 다른 목적과 강점을 가지고 있기 때문에 둘 다 공존 할 수 있다는 사실을 정말로 강조하고 싶습니다.

TL;DR

지금까지 살펴 봤습니다. 더 자세히 알고 싶다면.
  • Explicit grid layout (creating template rows and columns)
  • Placing items on the grid
  • The fr unit
  • Minmax function
  • CSS Flexbox and CSS Grid
지금은 여기까지입니다! 이 레이아웃 예제에 대한 귀하의 생각과 그리드가 흔들리는 곳에서 발견 한 다른 사례를 알려주십시오. CSS CSS가 없다면 Lola의 사진이 있습니다. 우리와 함께있어 줘서 고마워!
presentation
Deemaze Software는 웹 및 모바일 용 제품을 개발하는 디지털 대행사입니다. Twitter, FacebookInstagram을 통해 작업 내용을 추적하십시오. 또한, 여기 내 Dribbble이야.

이 글은 번역 글입니다. 원본 링크입니다.



안녕하세요! Early adopter입니다.페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp