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 메쉬를 통해 시각화 도구가 필요합니다.
대체적으로 말하자면 이것은 내가 정적 인쇄 디자인을'네트워크화'하는 과정이거나 당시 나의 영감의 원천이었다.

원본 설계의 모든 요소 검사

설계를 지필 스케치로 번역

서로 다른 뷰포트 크기를 둘러싸고 잘 변형될 수 있도록 격자를 어떻게 구성해야 하는지 계산해 낸다

설계

에 따라 유연성 및 고정 궤도 지정

브라우저에서 코드와 보기로 디자인 구축 시작

완전히 익을 때까지 궤도 크기를 조정하고 조정한다. 오, 잠깐만, 안 돼. 이건 치즈 고추 한 냄비 레시피가 아니야.😏

농담은 아니지만 조정과 조정에 관한 부분입니다.내가 브라우저 크기를 조정하는 빈도는 일반 인터넷 사용자가 생각하는 것보다 높다.지수급처럼 더 잦아요.😌.

용례: 제곡 예술가 소개

제곡 예술가 소개 저자Drew Sullivan
나는 에서 우연히 이 디자인을 발견하고 바로 자신에게 말했다. 헤헤, 나는 이미지로서 이 점을 할 수 있는 것이 아니라 인터넷에서 이 점을 할 수 있다.저는 잘 알고 있습니다Tycho. 왜냐하면 저는 2016년에 그album covers를 저의atCSSConf.Asia의 영감으로 사용했기 때문입니다.

검사하다

이것이 바로 내가 격자화 디자인을 보았을 때, 내 머릿속에서 발생한 일이다
이 설계는 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;
    }
  }
}

메인 제목 아래의 검은 선을 처리하기 위해 최소 높이의 조회를 거기에 두십시오.배치에서 뷰포트 단위를 사용하는 문제는 배치에 브레이크가 생길 수 있다는 것입니다.이것이 바로 왜 언론의 조회가 매우 중요한가 하는 것이다.따라서 컨텍스트가 더 이상 의미가 없을 때 뷰포트 셀을 전환할 수 있습니다.
다음은 행동의 최종 결과입니다.
미안하지만, 당신의 브라우저는 삽입식 동영상을 지원하지 않지만, 걱정하지 마세요. 당신은 download it 당신이 가장 좋아하는 비디오 플레이어로 볼 수 있습니다!
최초의 영감은 경관에서 가장 효과가 좋다. 단지 초상화 방향에서 효과가 좋지 않기 때문에 우리가 그것을 사용할 수 없다는 것은 아니다.우리의 업무는 동적 미디어를 설계하는 것을 고려하는 것이다. 솔직히 말하자면, 나는 이것이 매우 의미 있고 재미있다고 생각한다.
고정된 차원에서 사고하는 것 외에 또 어떤 다른 매개체가 존재합니까?최신 기능이 있는 브라우저에 어떻게 표시되는지 이외에, 우리는 우리의 디자인이 어떻게 좁은 화면이나 낡은 브라우저에서 변형되는지 고려해야 한다.나에게 있어서 이것이 바로 우리 매체의 진정한 특별한 원인이다.

끝내다

나는 CSS 격자가 디자이너와 개발자들이 더욱 창조적인 구조를 탐색하도록 격려하고 미리 봉인된 CSS 프레임워크에 대한 의존을 줄일 것이라고 진심으로 믿는다. 왜냐하면 직관적이고 강하기 때문이다.나는 CSS 프레임워크가 사라지지 않을 것이라고 생각한다. 그것들은 틀림없이 용례가 있을 것이다. 그러나 나는 CSS 격자가 웹에서 레이아웃을 구축하는 주류 기술이 되기를 기대한다😎.