10가지 편리한 CSS 그리드 코드 스니펫

CSS 그리드 사양은 정확히 "새로운" 것은 아니지만 주류 개발 세계에서는 확실히 더 최신입니다. 많은 프론트엔드 코더는 인터페이스에 적용하는 방법은 고사하고 CSS 그리드 속성에 대해서도 아직 모릅니다.

주변을 검색하여 많은 자습서를 찾을 수 있지만 코드 스니펫도 공부하는 것이 좋습니다. 이렇게 하면 실제 프로젝트에 뛰어들어 CSS 그리드가 라이브 웹 페이지에서 어떻게 작동하는지 확인할 수 있습니다.

이 컬렉션은 웹에서 하는 모든 작업에 대해 CSS 그리드를 배우고, 사용자 지정하고, 스타일을 다시 지정하는 데 도움이 되는 많은 리소스를 제공해야 합니다.

1. 다중 이미지 영웅 블록

그리드 속성으로 설계된 이 정말 멋진 영웅 블록으로 시작합시다. 이 디자인은 많은 잡지 스타일의 웹사이트에서 볼 수 있는 홈페이지 영웅 이미지 섹션을 모방합니다.

개발자 Rachel Andrew는 자신의 프로젝트에서 약간의 사용자 지정 CSS를 사용하여 이것을 만들었습니다. 그것은 믿을 수 없을만큼 잘 작동하고 디자인은 부팅에 완전히 반응합니다.

말할 것도 없이 그것은 모바일 화면에서 환상적으로 보입니다. 큰 이미지 블록에서 항상 찾을 수 있는 것은 아닙니다.

이것은 CSS 그리드를 연구하기 위한 훌륭한 리소스이자 잡지 스타일의 블로그 테마를 코딩하는 모든 사람을 위한 편리한 스니펫입니다.

2. CSS 그리드 레이아웃

grid-auto-flow 속성은 "dense" 설정을 사용하는 이 데모에서 전체 표시됩니다. 이렇게 하면 그리드 크기가 조정될 때 항목이 페이지에서 더 아래로 압착됩니다.

이 설정을 사용하면 위치를 변경하는 페이지 요소, 이러한 변경이 발생하는 위치 및 그리드가 응답하는 방식을 많이 제어할 수 있습니다. 이것은 주로 반응형 디자인에서 사용되는 미디어 쿼리보다 앞자리를 차지합니다.

이 코드가 무엇을 하는지 잘 모르겠다면 다음을 기억하십시오. Google은 당신의 친구입니다! 이 전체 설정을 다루는 훌륭한 게시물과 스택 오버플로 스레드가 많이 있습니다.

3. 그다지 으스스하지 않은 호박 사실

다음은 몇 가지 기본적인 호박 사실로 만든 멋진 스니펫입니다. 글쎄, CSS 그리드 레이아웃으로 구성된 호박 사실.

코드는 실제로 SCSS/Sass에서 실행되므로 파고들려면 언어에 어느 정도 익숙해야 합니다. 그러나 기본 속성을 보려면 CodePen 내에서 바로 Sass 코드를 원시 CSS로 컴파일할 수도 있습니다.

이 디자인에서 내가 가장 좋아하는 것 중 하나는 색상과 타이포그래피입니다. 호박 아이콘과 모든 노란색/주황색 음영으로 할로윈을 외칩니다.

4. 자동 육각 레이아웃

이것은 아마도 내가 이 갤러리에서 찾은 가장 실용적인 프로젝트 중 하나일 것입니다. 이 그리드 스타일을 보고 브라우저 크기를 조정해 보세요.

육각형 모양의 항목이 그에 따라 페이지에 맞게 재구성되는 것을 알 수 있습니다. 이것은 사진이 많은 복잡한 페이지를 처리하는 가장 좋은 방법일 것입니다. 나는 종종 회의 웹사이트와 직원이 많은 회사의 "회사 소개" 페이지에서 이러한 유형의 레이아웃을 봅니다.

이제 CSS 그리드 구조를 사용하면 수동 반응 스타일에 대해 걱정할 필요가 없습니다. 그리고 이 코드 조각은 유사한 레이아웃을 계획하기 위한 가장 좋은 시작점입니다.

5. CSS 그리드의 Pokedex

나는 아직 CSS 그리드에서 이 Pokedex만큼 창의적인 것을 본 적이 없습니다. 자동 채우기 셀 크기를 위해 약간의 JavaScript가 포함된 HTML 및 CSS에 의존합니다.

페이지 크기를 조정하면 그래픽 자체도 크기가 증가하는 것을 알 수 있습니다. 이것은 CSS로 처리하기 매우 쉽고 그리드 속성 중 일부를 배우면 훨씬 쉽습니다.

이것은 대화형이 아니므로 아무 것도 클릭하거나 새 페이지를 열 수 없습니다. 그러나 레이아웃 기초가 고정되어 있으면 이러한 기능을 추가하는 것이 매우 간단합니다.

6. 단순 그리드

웹에 인쇄 디자인 스타일을 제공하는 정말 흥미로운 아이디어가 있습니다. 헤더와 대형 타이포그래피가 있는 많은 열을 특징으로 하는 CodePen의 이 예제를 살펴보십시오.

그리드 레이아웃 자체는 사전 정의된 간격이 있는 설정된 열에 의존합니다. 즉, 브라우저 크기를 조정하면 이러한 규칙에 따라 특정 열이 분해됩니다.

특정 열이 항상 서로 옆에 나타나거나 적어도 보기에 나타나도록 하여 읽기 쉽도록 하는 훌륭한 방법입니다.

7. Flexbox 폴백이 있는 CSS 그리드

모든 브라우저가 CSS 그리드 구조를 따라잡은 것은 아닙니다. 그렇기 때문에 이 스니펫은 flexbox(및 float)를 폴백으로 사용하여 사용자 정의 CSS 그리드를 디자인하는 방법을 가르쳐줍니다.

그리드 속성이 지원되는 경우 사용하고 싶지만 그렇지 않은 경우 브라우저에서 무시하기를 원하기 때문에 이것은 실제로 까다롭습니다. 고맙게도 코드는 주석 처리가 잘 되어 있어 자세히 살펴보고 일부 기능을 직접 조정할 수도 있습니다.

이것을 완벽한 대체 솔루션이라고 부르지는 않겠지만 확실히 없는 것보다는 낫습니다.

8. 그리드 용어 데모

이 모든 혼란스러운 CSS 그리드 용어에 대해 확신이 서지 않습니까? 그러면 이 스니펫이 문제를 해결하는 데 도움이 될 수 있습니다.

이 예제를 자세히 살펴보면 그리드를 설명하는 글과 함께 몇 가지 강조 표시된 기능을 찾을 수 있습니다. 또한 격자선을 올바르게 보는 방법과 페이지에서 CSS 격자를 정확하게 보는 방법을 배우게 됩니다.

모든 것을 다루지 않기 때문에 이 데모에서 모든 것을 수집하지는 않을 것입니다. 도움이 되는 시각 자료와 함께 가장 쉬운 속성에 대한 작은 소개입니다.

9. 그리드 템플릿 열 사용: repeat()

grid-template-columns 속성의 매우 구체적인 예를 보려면 이 라이브 데모를 살펴보세요. CSS에서 동일한 열 값을 여러 번 선언하는 대신 반복 기능을 사용하는 방법을 보여줍니다.

다시 말하지만, 브라우저 지원은 여전히 ​​이를 따라잡고 있지만 대부분의 최신 웹 브라우저는 이 기술을 사용합니다.

말할 것도 없이 CSS 내에서 이것이 무엇을 하는지 이해하는 데 도움이 되는 많은 주석을 찾을 수 있습니다.

10. 순수 CSS 그리드 크로스워드

재미있는 메모로 끝내기 위해 Adrian Roworth의 순수한 CSS 낱말 퍼즐을 살펴보세요. 이 전체 레이아웃은 HTML 및 CSS 코드, 특히 레이아웃 구조에 대한 CSS 그리드 속성 외에는 아무 것도 기반으로 하지 않습니다.

더 미친 것은 낱말 상자에 내용을 입력하여 실제로 퍼즐을 풀 수 있다는 것입니다. 정말 멋지네요!

이것은 매우 복잡하며 여기에 나열된 몇 안 되는 프로젝트 중 모바일 친화적이지 않습니다. 그러나 이것은 우리가 웹에서 그리드 레이아웃을 얼마나 많이 사용했는지에 대한 증거이므로 가까운 장래에 이러한 종류의 항목을 더 많이 볼 수 있기를 바랍니다.