Membina jadual persidangan dengan CSS Grid

Rasa pencapaian bijak menggunakan teknologi baru tidak dapat ditandingi! Adalah baik untuk membaca pelbagai panduan pengenalan dan menghargai demonstrasi yang sejuk, tetapi hanya apabila anda menggunakannya dalam projek anda sendiri, anda boleh benar -benar memahami intipati.

Saya telah mendapat pemahaman baru mengenai grid CSS dalam proses membina susun atur yang fleksibel untuk jadual mesyuarat. Pelbagai keperluan projek adalah sempurna selaras dengan kelebihan grid: susun atur dua dimensi (menegak dan mendatar), dan kedudukan kompleks unsur-unsur kanak-kanak. Semasa proses membina bukti konsep, saya dapati beberapa helah untuk menjadikan kod ini sangat mudah dibaca dan sangat menarik untuk digunakan.

Demo terakhir termasuk beberapa ciri grid CSS yang menarik dan memaksa saya untuk menggali beberapa butiran grid yang tidak sering ditemui dalam pembangunan sehari -hari.

Sebelum anda memulakan, sebaiknya membuka tab lain dan merujuk kepada panduan grid CSS-Tricks 'CSS untuk melihat konsep yang terlibat dalam teks pada bila-bila masa.

Definisi keperluan susun atur

Saya berikan untuk membuat susun atur berikut, yang diilhamkan oleh Wordcamp-beratus-ratus persidangan bertema WordPress yang diadakan di seluruh dunia setiap tahun. Aktiviti -aktiviti ini berbeza -beza mengikut saiz dan bentuk, tetapi semua menggunakan alat susun atur jadual yang sama.

Saya telah membantu mengatur WordCamp beberapa kali dan laman web WordCamp yang direka jadi saya memahami kekurangan susun atur jadual HTML yang sedia ada. Sekiranya jadual tidak sesuai dengan grid bersatu, maka ... ¯ \ _ (ツ) _/¯

Untuk mencari pendekatan yang lebih baik, saya mula -mula menyenaraikan keperluan susun atur:

• Mesyuarat panjang berubah -ubah (terhad kepada kenaikan masa yang ditetapkan)
  Bayangkan mempunyai kuliah satu jam di tiga bilik pada masa yang sama dan seminar dua jam di bilik lain.
• Trek persidangan merentasi satu atau lebih "trek" sering dikaitkan dengan bilik tertentu di tempat. Sejauh Wordcamp berkenaan di Seattle, tempat itu boleh dirobohkan dengan dinding untuk menggabungkan dua bilik!
• Jadual boleh merangkumi masa lapang
  Pembatalan terakhir atau mesyuarat ultra-pendek akan meninggalkan ruang dalam jadual.
• Direka untuk disesuaikan dengan CSS
  Laman web WordCamp hanya membenarkan tetapan tema melalui CSS.
• Susun atur boleh dihasilkan secara automatik berdasarkan kandungan CMS Oleh kerana kami sedang membina susun atur berdasarkan data persidangan berstruktur mengenai beribu -ribu laman web, kami tidak boleh bergantung pada HTML atau CSS yang terlalu bijak atau disesuaikan.

Mula: Stabil HTML

Sebelum menulis mana -mana CSS, saya selalu bermula dengan HTML pepejal.

Tahap teratas<div> Akan mempunyai kelas <code>.schedule dan berfungsi sebagai elemen induk mesh. Setiap masa permulaan yang unik mempunyai tajuk sendiri diikuti oleh semua mesyuarat yang bermula pada masa itu. Tanda -tanda untuk setiap mesyuarat tidak penting, tetapi pastikan anda tidak perlu melihat susun atur untuk mengetahui kapan dan di mana mesyuarat itu. (Anda akan faham mengapa kemudian.)

<h2 id="Jadual-Mesyuarat"> Jadual Mesyuarat</h2>
<div class="schedule">

  <h3 id="pagi">8:00 pagi</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-Topik-persidangan-a"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Topik persidangan</a></h4>
    8:00 pagi - 9:00 pagi
    Jejak 1
    Nama pembesar suara</div>


  <h3 id="pagi">9:00 pagi</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-Topik-persidangan-a"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Topik persidangan</a></h4>
    9:00 pagi - 10:00 pagi
    Jejak 1
    Nama pembesar suara</div>




</div>

Susun atur mudah alih dan sandaran grid dilakukan!

Tambah beberapa CSS anda sendiri untuk mencantikkan halaman, dan susun atur mudah alih kami dan sandaran tanpa penyemak imbas CSS dilakukan!

Inilah yang kelihatan seperti menggunakan warna yang saya gunakan:

Tambah susun atur grid

Sekarang adalah bahagian grid CSS sebenar!

Momen inspirasi saya semasa proses pembinaan datang dari membaca artikel Robin mengenai trik CSS, "Membuat carta bar dengan CSS Grid." Pendek kata: Barisan grid mewakili 1% daripada ketinggian carta, jadi bilangan baris bar rentang adalah sama dengan peratusan yang diwakilinya.

 .chart {
  paparan: grid;
  grid-template-baris: ulangi (100, 1FR); /* 1 baris = 1%! */
}

.fifty-peratus-bar {
  grid-baris: 51/101; / * 101 - 51 = 50 => 50% */
}

Ini membuatkan saya menyedari bahawa grid adalah sempurna untuk sebarang susun atur yang berkaitan dengan beberapa jenis unit tambahan peraturan. Dalam kes jadual, unit adalah masa ! Dalam demo ini, kami akan menggunakan kenaikan 30 minit, tetapi anda boleh menyesuaikannya dengan keperluan anda. (Hanya sedar bug Chrome, ia mengehadkan susun atur grid kepada 1000 baris.)

Versi pertama yang saya cuba gunakan sintaks yang sama dan beberapa matematik asas untuk meletakkan mesyuarat dalam carta bar yang serupa dengan Robin. Kami menggunakan lapan baris kerana terdapat lapan 30 minit kenaikan antara 8 pagi dan 12 malam. Ingat bahawa nombor garis grid tersirat bermula pada 1 (bukan 0), jadi garis grid bernombor dari 1 hingga 9.

 .schedule {
  paparan: grid;
  grid-template-baris: ulangi (8, 1fr);
}

.Session-1 {
  grid-baris: 1/3; /* 8: 00-9: 00 pagi, 3-1 = 2 30 minit kenaikan*/
}

.SESS-2 {
  grid-baris: 3/6; /* 9: 00-10: 30 pagi, 6-3 = 3 30 minit kenaikan*/
}

Kelemahan teknik ini ialah meletakkan item pada grid dengan banyak baris sangat abstrak dan mengelirukan. (Soalan ini juga menambah banyak kerumitan kepada demonstrasi carta bar Robin.)

Di sinilah garisan grid bernama dimainkan! Daripada bergantung pada nombor garis grid, kita boleh memberikan setiap baris nama yang boleh diramal mengikut masa yang sama.

 .schedule {
  paparan: grid;
  grid-template-baris:
    [Time-0800] 1fr
    [Time-0830] 1fr
    [Time-0900] 1fr
    [Time-0930] 1FR;
    /* dll ...
        Nota: Gunakan masa 24 jam sebagai nama baris*/
}

.Session-1 {
  Grid-baris: Time-0800 / Time-0900;
}

.SESS-2 {
  Grid-baris: Time-0900 / Time-1030;
}

Ini sangat mudah difahami. Tidak ada keperluan untuk pengiraan matematik yang kompleks untuk menentukan bilangan baris sebelum atau selepas mesyuarat bermula atau berakhir. Lebih baik lagi, kita boleh menggunakan maklumat yang disimpan di WordPress untuk menghasilkan nama Gridline dan gaya susun atur pertemuan. Tambahkan masa permulaan dan akhir ke grid dan tidak mengapa!

Oleh kerana terdapat banyak trek dalam jadual, kita perlu menyediakan lajur untuk setiap trek. Lagu ini berfungsi sama seperti masa, menggunakan garis trek yang dinamakan untuk setiap garisan grid. Terdapat juga lajur pertama tambahan untuk tajuk Waktu Mula.

 .schedule { / * diteruskan * /
  Grid-template-lajur:
    [Times] 4em
    [track-1-start] 1fr
    [track-1-end track-2-start] 1fr
    [Track-2-end Track-3-Start] 1FR
    [Track-3-end Track-4-Start] 1FR
    [track-4-end];
}

Tetapi di sini kita mengambil garis grid penamaan satu langkah lagi. Setiap baris mendapat dua nama: trek yang menunjukkan trek yang dimulakan dan trek yang menunjukkan akhir. Ini tidak diperlukan, tetapi ia menjadikan kod lebih jelas, terutamanya apabila mesyuarat merangkumi pelbagai lajur.

Sebaik sahaja garisan grid masa dan trek ditakrifkan, kita kini hanya perlu mengetahui masa dan trek mesyuarat untuk meletakkan sebarang mesyuarat!

 .SESS-8 {
  Grid-baris: Time-1030 / Time-1100;
  Grid-lajur: track-2-start / track-3-end; /* Salib dua trek! */
}

Meletakkan semua ini bersama -sama, kami mendapat kod yang panjang tetapi sangat mudah dibaca yang sangat menyenangkan untuk digunakan.

 Skrin @media dan (Min-lebar: 700px) {
  .schedule {
    paparan: grid;
    Grid-Gap: 1EM;
    grid-template-baris:
      [Tracks] Auto /* Foreshadowing! */
      [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;
    Grid-template-lajur:
      [Times] 4em
      [track-1-start] 1fr
      [track-1-end track-2-start] 1fr
      [Track-2-end Track-3-Start] 1FR
      [Track-3-end Track-4-Start] 1FR
      [track-4-end];
  }

  .Time-slot {
    Grid-lajur: masa;
  }
}

<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>

Kod akhir menggunakan gaya sebaris untuk penempatan mesyuarat, yang terasa sesuai untuk saya. Jika anda tidak suka melakukan ini dan menggunakan penyemak imbas yang lebih moden, anda boleh lulus nama baris ke CSS melalui pembolehubah CSS.

Penerangan cepat: Gunakan unit FR dan nilai auto untuk menetapkan ketinggian garis

Satu perincian yang patut diberi perhatian ialah penggunaan unit FR untuk menentukan ketinggian baris.

Apabila menggunakan 1FR untuk menentukan ketinggian baris, semua baris mempunyai ketinggian yang sama. Ketinggian ini ditentukan oleh kandungan baris tertinggi dalam jadual. (Saya terpaksa membaca spesifikasi W3C tentang FR untuk memikirkan ini!) Ini menghasilkan jadual yang baik yang berkadar dengan masa, tetapi juga boleh membawa kepada susun atur yang sangat tinggi.

Sebagai contoh, jika grid jadual anda menggunakan kenaikan 15 minit dari pukul 7 pagi hingga 6 petang, terdapat 48 baris grid secara keseluruhan. Dalam kes ini, anda mungkin mahu menggunakan auto sebagai ketinggian baris anda, kerana ketinggian setiap baris grid ditentukan oleh kandungannya, jadi penjadualan lebih padat.

Ayat mengenai fungsi tambahan

Sesetengah teknologi grid CSS mempunyai kebimbangan aksesibiliti. Khususnya, keupayaan untuk mengubah urutan maklumat secara visual dengan cara yang tidak sepadan dengan urutan sumber boleh menyebabkan masalah bagi mereka yang menggunakan navigasi papan kekunci.

Susun atur ini menggunakan ciri ini untuk meletakkan item sewenang -wenangnya pada grid, jadi berhati -hati diperlukan. Walau bagaimanapun, sejak tajuk dan perintah sumber sejajar dengan visualisasi masa mula, nampaknya saya nampaknya merupakan cara yang selamat untuk menggunakannya.

Jika anda diilhamkan untuk melakukan sesuatu yang serupa, fikirkan dengan teliti mengenai ciri -ciri kebolehaksesan . Dalam kes ini, masuk akal untuk mengatur maklumat dalam susunan kronologi, tetapi saya dapat membayangkan kes yang sah di mana perintah tab ke bawah dan bukannya mendatar. (Mengubah demo ini untuk melakukan ini tidak boleh terlalu sukar!)

Apa sahaja yang anda lakukan, selalu pertimbangkan aksesibiliti.

Tambahkan nama trek melekit

Akhirnya, sudah tiba masanya untuk menambah nama trek yang kelihatan seperti tajuk jadual ke bahagian atas setiap lajur. Oleh kerana trek persidangan sudah dapat dilihat, saya memilih untuk menggunakan aria-hidden="true" untuk menyembunyikan "tajuk" dalam teknologi bantuan.

Nama trek terletak di grid baris pertama dan mudah dinamakan "Tracks". Selagi anda tidak mempunyai masalah limpahan yang pelik, position: sticky akan memastikan nama -nama ini dapat dilihat semasa menatal.

 Jejak 1
Jejak 2
Jejak 3
Jejak 4

 .track-slot {
  Paparan: Tiada; /* boleh dilihat hanya semasa menggunakan susun atur grid*/
}

@Supports (paparan: grid) {
  Skrin @media dan (Min-lebar: 700px) {    
    .track-slot {
      grid-baris: trek;
      paparan: blok;
      Kedudukan: melekit;
      Atas: 0;
      Z-indeks: 1000;
      latar belakang warna: RGBA (255,255,255, .9);
    }
  }
}

Ini adalah sentuhan penamat yang bijak untuk persembahan akhir. ✨

hasil

Inilah yang telah kami diperkenalkan untuk kelihatan seperti selepas semua yang kami sediakan!

Kami baru sahaja bermula

Jadual ini pastinya aplikasi grid CSS yang paling memuaskan yang pernah saya buat. Saya suka penamaan baris "didorong oleh data" dan semantiknya, dan keperluan akses dan CMS dipadankan dengan sempurna tanpa sebarang kesulitan.

Satu-satunya soalan yang tinggal untuk saya ialah jenis lain yang boleh dibina? Saya melihat beberapa susun atur kalendar yang hebat, dan susun atur papan monopoli. Jadi bagaimana dengan stadium bola sepak, garis masa, meja makan atau tempat duduk teater? Apa lagi?