CSS 그리드로 회의 일정 구축

새로운 기술을 사용하여 영리하게 달성 한 느낌은 비교할 수 없습니다! 다양한 입문 가이드를 읽고 멋진 시연을 감상하는 것이 좋지만 실제로 자신의 프로젝트에서 실제로 사용하는 경우에만 본질을 이해할 수 있습니다.

회의 일정에 대한 유연한 레이아웃을 구축하는 과정에서 CSS 그리드에 대한 새로운 이해를 얻었습니다. 이 프로젝트의 다양한 요구 사항은 그리드의 장점과 완벽하게 일치합니다 : 2 차원 (수직 및 수평) 레이아웃, 어린이 요소의 복잡한 위치. 개념 증명을 구축하는 과정에서, 나는 코드를 읽기 쉽고 매우 흥미롭게 만드는 몇 가지 요령을 발견했습니다.

마지막 데모에는 흥미로운 CSS 그리드 기능이 포함되어 있으며 일상적인 개발에서 종종 발생하지 않은 그리드 세부 사항을 파헤쳐 야했습니다.

시작하기 전에 다른 탭을 열고 CSS- 트릭의 CSS 그리드 안내서를 참조하여 언제든지 텍스트와 관련된 개념을 확인하는 것이 가장 좋습니다.

레이아웃 요구 사항 정의

나는 매년 전 세계에서 열린 WordPress를 테마로 한 회의에서 영감을 얻은 다음 레이아웃을 만들기 시작했습니다. 이러한 활동은 크기와 형태가 다르지만 모두 동일한 일정 레이아웃 도구를 사용합니다.

WordCamp를 여러 번 배열하고 WordCamp 웹 사이트를 설계하여 기존 HTML 테이블 레이아웃의 단점을 이해했습니다. 일정이 통합 그리드를 준수하지 않으면 ... ¯ \ _ (ツ) _/¯

더 나은 접근 방식을 찾기 위해 먼저 레이아웃 요구 사항을 나열했습니다.

• 가변 길이 회의 (설정 시간 증가로 제한)
  동시에 3 개의 객실에서 1 시간 강의와 다른 방에서 2 시간의 세미나를 상상해보십시오.
• 하나 이상의 "트랙"을 가로 지르는 컨퍼런스 트랙은 종종 장소의 특정 객실과 관련이 있습니다. 시애틀에서 WordCamp에 관한 한, 공연장은 벽으로 철거되어 두 개의 방을 통합 할 수 있습니다!
• 일정에는 자유 시간
  가 포함될 수 있습니다 마지막 순간 취소 또는 초고준 회의는 일정에 공간을 남길 것입니다.
• CSS로 사용자 정의 할 수 있도록 설계되었습니다
  WordCamp 웹 사이트는 CSS를 통해서만 테마 설정 만 허용합니다.
• CMS 컨텐츠
  에 따라 레이아웃을 자동으로 생성 할 수 있습니다. 수천 개의 웹 사이트에서 구조화 된 회의 데이터를 기반으로 레이아웃을 구축하고 있기 때문에 지나치게 영리하거나 맞춤형 HTML 또는 CSS에 의존 할 수 없습니다.

시작 : 안정적인 HTML

CSS를 작성하기 전에 항상 Solid HTML로 시작합니다.

최상위 레벨<div> <code>.schedule 클래스를 갖고 메쉬 부모 요소 역할을합니다. 각 독특한 시작 시간에는 자체 제목과 그 당시 시작되는 모든 회의가 있습니다. 각 회의의 표시는 중요하지 않지만 회의가 언제 어디서 있는지 알기 위해 레이아웃을 볼 필요가 없습니다. (나중에 이유를 이해할 것입니다.)

<h2 id="회의-일정"> 회의 일정</h2>
<div class="schedule">

  <h3 id="오전-시">오전 8시</h3>
  <div class="session session-1">
    <h4 id="a-href-https-www-php-cn-link-ac-c-dd-dc-b-e-fe-c-e-b-회의-주제-a"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">회의 주제</a></h4>
    오전 8시 - 오전 9시
    트랙 1
    스피커의 이름</div>


  <h3 id="오전-시">오전 9시</h3>
  <div class="session session-2">
    <h4 id="a-href-https-www-php-cn-link-ac-c-dd-dc-b-e-fe-c-e-b-회의-주제-a"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">회의 주제</a></h4>
    오전 9시 - 오전 10시
    트랙 1
    스피커의 이름</div>




</div>

모바일 레이아웃 및 그리드 폴백이 완료되었습니다!

자신의 CSS를 추가하여 페이지를 아름답게하고 CSS 그리드 브라우저가없는 모바일 레이아웃 및 폴백이 완료됩니다!

내가 사용하는 색상을 사용하는 모습은 다음과 같습니다.

그리드 레이아웃을 추가하십시오

이제 실제 CSS 그리드 부품입니다!

건설 과정에서 영감의 순간은 CSS- 트릭에 관한 Robin의 기사,“CSS 그리드를 사용한 막대 차트 제작”에서 나왔습니다. 간단히 말해서 그리드 행은 차트 높이의 1%를 나타내므로 막대가 쏟아지는 행의 수는 나타내는 백분율과 동일합니다.

 .CHART {
  디스플레이 : 그리드;
  그리드-템플릿 열 : 반복 (100, 1fr); /* 1 라인 = 1%! */
}

.fifty-percent-bar {
  그리드 로우 : 51 / 101; / * 101-51 = 50 => 50% */
}

이로 인해 그리드는 일종의 규칙 증분 장치와 관련된 모든 레이아웃에 적합하다는 것을 알게되었습니다. 일정의 경우, 장치는 시간 입니다! 이 데모에서는 30 분 단위를 사용하지만 필요에 맞게 조정할 수 있습니다. (Chrome의 버그를 알고 있으면 그리드 레이아웃을 1000 행으로 제한합니다.)

내가 시도한 첫 번째 버전은 유사한 구문과 일부 기본 수학을 사용하여 회의를 Robin과 유사한 막대 차트에 넣습니다. 오전 8시에서 오후 12시 사이에 8 분 단위가 8 분 씩있어 8 줄을 사용합니다. 암시 적 그리드 라인 번호는 1 (0이 아닌 1)에서 시작하므로 그리드 라인은 1에서 9로 번호가 매겨집니다.

 .일정 {
  디스플레이 : 그리드;
  그리드-템플릿 열 : 반복 (8, 1fr);
}

.session-1 {
  그리드 로우 : 1 / 3; /* 8 : 00-9 : 00 AM, 3-1 = 2 30 분 증분*/
}

.session-2 {
  그리드 로우 : 3 / 6; /* 9 : 00-10 : 30 AM, 6-3 = 3 30 분 증가*/
}

이 기술의 단점은 많은 행으로 그리드에 항목을 배치하는 것이 매우 추상적이고 혼란 스럽다는 것입니다. (이 질문은 또한 Robin의 변호사 차트 데모에 많은 복잡성을 더합니다.)

이곳은 이름이 지정된 그리드 라인이 작동하는 곳입니다! 그리드 라인 번호에 의존하는 대신 해당 시간에 따라 각 라인에 예측 가능한 이름을 줄 수 있습니다.

 .일정 {
  디스플레이 : 그리드;
  그리드-템플릿 열 :
    [Time-0800] 1fr
    [Time-0830] 1fr
    [Time-0900] 1fr
    [Time-0930] 1fr;
    /* 등...
        참고 : 24 시간 시간을 라인 이름*/로 사용하십시오.
}

.session-1 {
  그리드 로우 : Time-0800 / Time-0900;
}

.session-2 {
  그리드 로우 : Time-0900 / Time-1030;
}

이것은 이해하기 매우 쉽습니다. 회의가 시작되거나 종료 된 후 행의 수를 결정하기 위해 복잡한 수학적 계산이 필요하지 않습니다. 더 좋은 점은 WordPress에 저장된 정보를 사용하여 그리드 라인 이름을 생성하고 레이아웃 스타일을 만날 수 있습니다. 시작 및 종료 시간을 그리드에 추가하면 괜찮습니다!

일정에 여러 트랙이 있으므로 각 트랙에 대한 열을 설정해야합니다. 트랙은 각 그리드 라인에 명명 된 트랙 라인을 사용하여 시간과 유사하게 작동합니다. 시작 시간 제목에 대한 첫 번째 열이 있습니다.

 .Schedule { / * 계속 * /
  그리드-템플릿-컬럼 :
    [시간] 4em
    [트랙 -1- 시작] 1fr
    [Track-1 엔드 트랙 -2- 시작] 1fr
    [트랙 -2- 엔드 트랙 -3- 시작] 1fr
    [트랙 -3- 엔드 트랙 -4- 스타트] 1fr
    [트랙 -4- 엔드];
}

그러나 여기서 우리는 이름 지정 그리드 라인을 한 단계 더 발전시킵니다. 각 라인에는 두 개의 이름이 있습니다. 시작한 트랙을 나타내는 트랙과 끝을 나타내는 트랙이 있습니다. 이것은 엄격하게 필요하지 않지만 특히 회의가 여러 열에 걸쳐있을 때 코드를 더 명확하게 만듭니다.

시간과 트랙 기반 그리드 라인이 정의되면 이제 회의를하기 위해 회의 시간과 트랙 만 알아야합니다!

 .session-8 {
  그리드 로우 : Time-1030 / Time-1100;
  그리드-컬럼 : 트랙 -2- 시작 / 트랙 -3- 엔드; /* 두 트랙을 건너! */
}

이 모든 것을 종합하면 사용하기가 매우 즐겁지 만 매우 읽기 쉬운 코드를 얻습니다.

 @Media 화면 및 (min-width : 700px) {
  .일정 {
    디스플레이 : 그리드;
    그리드 갭 : 1em;
    그리드-템플릿 열 :
      [트랙] 자동 /* 예초! */
      [Time-0800] 1fr
      [Time-0830] 1fr
      [Time-0900] 1fr
      [Time-0930] 1fr
      [TIME-1000] 1fr
      [Time-1030] 1fr
      [Time-1100] 1fr
      [Time-1130] 1fr
      [Time-1200] 1fr;
    그리드-템플릿-컬럼 :
      [시간] 4em
      [트랙 -1- 시작] 1fr
      [Track-1 엔드 트랙 -2- 시작] 1fr
      [트랙 -2- 엔드 트랙 -3- 시작] 1fr
      [트랙 -3- 엔드 트랙 -4- 스타트] 1fr
      [트랙 -4- 엔드];
  }

  . 타임 슬롯 {
    그리드-컬럼 : 시간;
  }
}

<div style="grid-column: track-1; grid-row: time-0800 / time-0900;">

</div>
<div style="grid-column: track-2; grid-row: time-0800 / time-0900">

</div>

최종 코드는 인라인 스타일을 사용하여 회의 배치를 사용합니다. 이 작업을 좋아하지 않고보다 최신 브라우저를 사용하는 경우 CSS 변수를 통해 라인 이름을 CSS로 전달할 수 있습니다.

빠른 설명 : FR 장치 및 자동 값을 사용하여 선 높이를 설정합니다.

주목할만한 세부 사항 중 하나는 행 높이를 정의하기 위해 FR 장치를 사용하는 것입니다.

1FR을 사용하여 행 높이를 결정할 때 모든 행의 높이가 동일합니다. 이 높이는 일정에서 가장 높은 행의 내용에 의해 결정됩니다. (나는 이것을 알아 내기 위해 FR에 대한 W3C 사양을 읽어야했다!) 이것은 시간에 비례하는 좋은 일정을 만들어 내지 만 매우 높은 레이아웃으로 이어질 수 있습니다.

예를 들어, 스케줄 그리드가 오전 7 시부 터 오후 6 시까 지 15 분 단위를 사용하는 경우 총 48 개의 그리드 줄이 있습니다. 이 경우 각 그리드 행의 높이가 콘텐츠에 의해 결정되므로 스케줄링이 더 컴팩트하기 때문에 Auto를 행 높이로 사용하려고합니다.

보조 기능에 대한 문장

일부 CSS 그리드 기술에는 접근성 문제가 있습니다. 구체적으로, 소스 순서와 일치하지 않는 방식으로 정보 순서를 시각적으로 변경하는 기능은 키보드 내비게이션을 사용하는 사람들에게 문제를 일으킬 수 있습니다.

이 레이아웃은이 기능을 사용하여 항목을 그리드에 임의로 배치하므로주의해야합니다. 그러나 제목 및 소스 순서는 시작 시간의 시각화와 일치하기 때문에 이것이 안전한 사용 방법 인 것 같습니다.

비슷한 일을하도록 영감을 받으면 접근성 기능에 대해 신중하게 생각하십시오 . 이 경우, 정보를 시간순으로 정리하는 것이 합리적이지만, 탭 순서가 수평보다는 하향 조치 인 합법적 인 사례를 상상할 수 있습니다. (이 데모를 수정하는 것은 너무 어렵지 않아야합니다!)

당신이 무엇을하든 항상 접근성을 고려하십시오.

스티커 트랙 이름을 추가하십시오

마지막으로, 각 열 상단에 테이블 제목처럼 보이는 트랙 이름을 추가해야합니다. 컨퍼런스 트랙이 이미 보이기 때문에 aria-hidden="true" 사용하여 보조 기술에 "제목"을 숨기기로 결정했습니다.

트랙 이름은 첫 번째 행 그리드에 있으며 편리하게 "트랙"이라고합니다. 이상한 오버플로 문제가없는 한 position: sticky 스크롤하는 동안 이러한 이름을 보이게합니다.

 트랙 1
트랙 2
트랙 3
트랙 4

 .Track-Slot {
  디스플레이 : 없음; /* 그리드 레이아웃을 사용할 때만 표시*/
}

@supports (display : 그리드) {
  @Media 화면 및 (min-width : 700px) {    
    .Track-Slot {
      그리드 열 : 트랙;
      디스플레이 : 블록;
      위치 : 스티커;
      상단 : 0;
      Z- 인덱스 : 1000;
      배경색 : RGBA (255,255,255, .9);
    }
  }
}

이것은 최종 프레젠테이션을위한 영리한 마무리 터치입니다. ✨

결과

다음은 우리가 함께 모은 모든 것을보고 모습을 보았습니다!

우리는 방금 시작했습니다

이 일정은 확실히 내가 만든 가장 만족스러운 CSS 그리드 앱입니다. 나는 "데이터 중심"과 시맨틱 행 이름을 좋아하며 접근성 및 CMS 요구 사항은 불편하지 않고 완벽하게 일치합니다.

나에게 남은 유일한 질문은 다른 유형의 "데이터 중심"메쉬를 구축 할 수있는 것입니까? 나는 훌륭한 달력 레이아웃과 독점 보드 레이아웃을 보았습니다. 그렇다면 축구 경기장, 타임 라인, 식탁 또는 극장 좌석은 어떻습니까? 다른 뭐야?