CSS 그리드로 어떻게 디자인하나요?

이전에 시도하지 않은 사람들에게 CSS 그리드를 소개 한 후, 사람들이 질문하는 그리드의 구현이 아니라 오히려 그 이전의 것임을 알게되었습니다. 레이아웃이 어떻게 설정 될지에 대한 실제 계획.

이전 글을 통해 CSS 그리드 교육에 대한 새로운 글을 읽었을 때 제가 사용했던 유추 중 하나는 원예에 관한 것입니다. 즉, 수국, 장미 및 튤립이있는 곳을 정확하게 큐레이팅하는 것입니다. 좋아, 거기서 널 잃어 버렸어. 나는 원예가 모든 사람의 것이 아니라고 생각 한다 . 🤷 .

그러나 솔직히 말해서 CSS 그리드로 디자인하고 제작을 시작한 이후 필자는 연필과 종이를 사용하여 내 그리드를 훨씬 더 많이 스케치했습니다. 그리드 구문 자체는 매우 시각적이며 그리드를 가르치고있을 때 항상 강조합니다.

간단한 그리드의 구문을 살펴보십시오.

.grid {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: 200px 200px;
}

그리드에는 3 열과 2 행이 있다고 이미 말할 수 있습니다. 그리고 이것은 훨씬 더 분명 grid-template-areas합니다. 나는 이것도 꽤 좋아합니다.

.grid {
  display: grid;
  grid-template-columns: 12em 1fr 15em;
  grid-template-rows: 10em 20em 1fr 10em;
  grid-template-areas: 'a a b'
                       'c d d'
                       'c d d'
                       'e e e';
}

.grid-item__a { grid-area: a; }
.grid-item__b { grid-area: b; }
.grid-item__c { grid-area: c; }
.grid-item__d { grid-area: d; }
.grid-item__e { grid-area: e; }

코드가 배치되는 방식으로 브라우저에서 표를 시각화하는 것은 매우 직관적입니다. 환상적입니다. 나는이 방식으로 행동하는 다른 속성이 전혀 없다고 생각합니다. 시각적 프리젠 테이션에는 시각적 도구가 필요하며 CSS 그리드를 사용하여 시각적으로 표현할 수 있습니다.

따라서 폭 넓은 장면에서 이것은 정적 인 인쇄물 디자인 또는 그 당시 영감의 원천이었던 다른 것이 무엇이든간에 "웹에 묻어 버리는"나의 과정입니다.

1. 원본 디자인의 모든 요소를 ​​검사하십시오.
2. 디자인을 연필과 종이 스케치로 번역하십시오.
3. 그리드가 어떻게 구조화되어 다양한 뷰포트 크기를 멋지게 변형 할 수 있는지 알아 봅니다.
4. 디자인에 따라 유연하고 고정 된 트랙 지정
5. 코드로 디자인을 빌드하고 브라우저에서보기 시작하십시오.
6. 조정 및 트랙 크기를 완전히 조리 때까지 기다려, 죄송합니다, 이것은 냄비 치즈 냄비 요리법이 아닙니다 😏

비록 내가 조정과 조정 부분에 대해 놀리는 것이 아니었지만. 평균적인 웹 사용자가 평소보다 더 자주 브라우저 크기를 조정합니다. 기하 급수적으로 더 자주 Like .

유스 케이스 : Tycho 아티스트 프로필

Drew Sullivan의 Tycho 아티스트 프로필

Dribbble에서이 디자인을 발견하고 즉시 나 자신에게 생각했습니다.이 사진을 웹이 아닌 이미지로 할 수 있습니다. 나는 그의 앨범 커버 를 CSSConf.Asia 에서 처음으로 컨퍼런스 토크 에 대한 영감으로 사용했기 때문에 Tycho 에 익숙했습니다 . 2016 년 아시아로 돌아 왔습니다.

검사하다

이것은 그리드 - ifyable 디자인을 볼 때 내 머리에 무슨 일이

디자인은 6 열 4 행으로 나눌 수 있습니다. 어쩌면 당신은 사물을 다르게 볼 수 있습니다. 직관적으로 5 개의 기둥이나 다른 것을 볼 수 있습니다. 디자인에 대한 필자의 태도는 매우 자유 분방합니다. 그렇다면 잘 작동하는 것을 생각해 내십시오.

번역, 구조 지정

연필과 종이는 싸고 빠릅니다. 이를 통해 내 트랙을 반복하면서 최종 트랙을 시각화 할 수있게 도와줍니다. 처음으로 그리드 구조를 알아 차린 사람들로부터 얻은 질문은 왜 네 번째 (왼쪽에서) 유연한 컬럼이 있습니까?

나는 아날로그 스케치를 좋아한다. 그것은 나를 위해 일한다.

주 텍스트와 피처 이미지 사이에 원하는 유연한 간격을보다 효과적으로 제어하기 위해 추가 열을 넣기로했습니다. 그러나 CSS를 할 때 항상 고양이를 피하는 방법은 여러 가지가 있습니다. 열을 더 적게 사용하려면 그렇게하십시오.

마지막으로, 코드 시간!

짓다

항상 먼저 마크 업하십시오. 요즘 애들이하고있는 것에 상관없이 나는 총을 들고 스틱 마크 업부터 시작한다. 재미있는 실험 (어쩌면 당신이 아니지만 확실히 나를 위해)은 사이트가 Lynx에서 읽는 방법을 보는 것 입니다. 사이트의 콘텐츠가 제대로 구성되어 있는지 여부를 판단하는 데 유용합니다.

나에게 합리적으로 보인다.

글꼴, 색상 및 텍스트 서식과 같은 기본적인 시각적 스타일. 브라우저는 자신 만의 스타일을 가지고 있기 때문에 기본적 으로 여백과 여백을 설정 box-sizing하고 설정할 수 border-box는 있습니다. 그냥 개인적인 취향.

main {
  max-width: 45em;
  margin: 0 auto;
  position: relative;
  padding: 1em;
}

_:-ms-input-placeholder, :root main {
  display: block;
}

h1 {
  font-family: $header-font;
  color: $accent;
  font-size: calc(3em + 7vw);
  margin-bottom: 0.25em;
}

h2 {
  text-transform: uppercase;
  font-size: calc(1em + 0.5vw);
  color: lighten($text, 50%);
  margin-bottom: 1em;
}

hr {
  opacity: 0;
}

.about {
  line-height: 1.3;
  margin-bottom: 1em;
}

a {
  display: block;
  text-transform: uppercase;
  text-decoration: none;
  color: $text;
  margin-bottom: 2em;
  font-weight: bold;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location {
  text-transform: uppercase;
  line-height: 1.5;
  font-weight: bold;
}

button {
  border: 0;
  background-color: $accent;
  color: $main;
  text-transform: uppercase;
  font-size: 100%;
  padding: 1em 2em;
  position: absolute;
  right: 1em;
  bottom: 1em;
}

기본 레이아웃은 거의 보편적 인 CSS, 즉 모든 곳에서 지원되는 속성을 사용해야합니다. 항상 웹 페이지가 모든 브라우저에서 똑같이 보일 필요는 없다고하더라도, 깨진 것은 디자인 패턴 이 아닙니다 . 내 친구들. 이 기본 레이아웃은 조금 평범하고 지루해 보일지 모르지만, 이봐, 내가 타이코를보고 싶다면 모든 정보가 내 편안한 소비를 위해 거기에있다.

바닐라는 괜찮아. 정말로.

이제 그리드를 가지고 노는 재미있는 일을 시작할 수 있습니다. 공간을 허용 할 때 레이아웃이 완전히 오버플로하지 않고 창을 차지하기를 원했기 때문에 fr 및 뷰포트 단위와 같은 유연한 단위를 사용하기로했습니다. 그리드 템플릿 - 컬럼 프로퍼티를 보면, 그리드를 사용 해본 적이 없다면 약간의 열매를 맺게됩니다.

그리고 모든 행은 뷰포트 높이에 상대적입니다. 약간 까다로울 수 있습니다. 몇 가지 조정이 있었고, 조병의 브라우저 크기 조정, 더 많은 조정이 뒤 따르기 때문에 초기 값이 더 이상 무엇인지 정확히 기억할 수 없습니다. 사진을 얻습니다.

조정, 조정, 헹굼, 반복

결국 나는 이것에 정착했다.

@supports (display:grid) {
  @media (min-width: 42em) and (min-height: 27em) {
    main {
      max-width: none;
      padding: 0;
      display: grid;
      grid-template-columns: 2fr minmax(10em, max-content) minmax(14em, max-content) minmax(1em, 1fr) fit-content(28em) calc(2em + 0.5vw);
      grid-template-rows: 35vh 40vh 15vh 10vh;
    }

    h1 {
      grid-column: 3 / 6;
      grid-row: 1 / 2;
      z-index: 2;
      padding-left: 0.25em;
      margin-bottom: initial;
    }

    h2 {
      grid-row: 1 / -1;
      grid-column: 6 / 7;
      writing-mode: vertical-rl;
      margin-bottom: initial;
      color: $text;
    }

    hr {
      grid-column: 5 / 6;
      grid-row: 2;
      height: 6px;
      background-color: $text;
      width: 20ch;
    }

    .about {
      grid-column: 5 / 6;
      grid-row: 2;
      align-self: end;
      padding-bottom: 4vh;
      margin-bottom: initial;
    }

    a {
      grid-column: 5 / 6;
      justify-self: end;
      align-self: center;
      margin-bottom: initial;

      &::before {
        content: '';
        display: block;
        height: 4px;
        background-color: $accent;
        width: 4ch;
        margin-bottom: 1em;
      }
    }

    img {
      grid-column: 1 / 4;
      grid-row: 1 / 4;
    }

    .location {
      grid-column: 3 / 4;
      grid-row: 3 / 4;
      z-index: 2;
      background: $main;
      text-align: center;
      display: flex;

      p {
        margin: auto;
      }
    }

    button {
      grid-column: 2 / 3;
      grid-row: 4 / 5;
      position: initial;
      padding: 0;
    }
  }

  @media (min-width: 48em) and (min-height: 27em) {
    hr {
      opacity: 1;
    }
  }
}

최소 높이 쿼리는 메인 헤더 아래의 검은 선을 처리하기 위해 거기에 입력되었습니다. 뷰포트 단위를 레이아웃에 사용하는 것은 레이아웃이 깨지는 지점이 분명히 있습니다. 그래서 미디어 쿼리가 필수적입니다. 따라서 컨텍스트가 더 이상 적합하지 않은 경우 뷰포트 단위에서 전환 할 수 있습니다.

최종 결과는 다음과 같습니다.

원한다면 독립 실행 형 데모로 놀아보십시오.

그리고 CodePen, 그게 더 당신의 일이라면. 당신이 너무 크기 조정과 재미를 가질 수 있도록 나는 전체 페이지 모드에서 보는 것이 좋습니다 🤣 .

원래의 영감은 가로보기에서 가장 잘 작동했으며, 세로 방향에서 잘 작동하지 않는다고해서 우리가 채택 할 수 없다는 것을 의미하지는 않습니다. 우리의 임무는 역동적 인 매체를 설계하는 것에 대해 생각하는 것입니다. 그리고 저는 솔직히 말하면 엄청난 보람과 재미를 느낍니다.

하나의 고정 된 차원에서 생각하지 않는 다른 매체가 있습니까? 좁은 화면이나 오래된 브라우저에서 디자인이 변하는 방법과 최신 기능이있는 브라우저에 어떻게 나타나는지 생각해보십시오. 그리고 저에게 그것은 우리 매체를 정말로 특별하게 만드는 것입니다.

마무리

CSS 그리드는 직관적이면서도 강력한 특성으로 인해 디자이너와 개발자가보다 창의적인 레이아웃을 탐구하고 미리 준비된 CSS 프레임 워크에 덜 의존하게 할 것이라고 진정으로 믿습니다. 나는 CSS 프레임 워크 멀리 갈 것 생각하고,이 확실히있는 그들을 위해 케이스를 사용하지만, CSS 그리드 이동 -에 기술을 웹에 건물 레이아웃에있을 때 나는 시간을 기대하지 않는 😎 .