Membina susun atur trello dengan grid css dan flexbox

Takeaways Key

Tutorial menunjukkan cara melaksanakan susun atur asas papan trello menggunakan grid CSS dan Flexbox, menyediakan penyelesaian yang responsif, CSS sahaja. Susun atur terdiri daripada bar aplikasi, bar papan, dan bahagian yang mengandungi senarai kad.
Tutorial menerangkan cara menggunakan grid 3 × 1 untuk membina struktur susun atur, dengan dua baris pertama yang mempunyai ketinggian tetap dan baris ketiga yang merangkumi ketinggian ketinggian yang tersedia. Ia juga menggunakan unit Viewport untuk memastikan bahawa bekas sentiasa setinggi Viewport pelayar.
Tutorial menunjukkan cara menggunakan bekas Flexbox Single-Line Viewport Flexbox penuh untuk memformat senarai kad. Ia juga menunjukkan cara menggunakan harta limpahan-X untuk memaparkan bar skrol mendatar di bahagian bawah skrin apabila senarai tidak sesuai dengan lebar viewport.
Tutorial menunjukkan bahawa kekangan ketinggian maksimum digunakan pada senarai yang tidak teratur untuk menguruskan ketinggian senarai. Ia juga menerangkan cara membuat senarai setinggi bekas induknya, dan bagaimana menggunakan harta limpahan untuk menunjukkan kad skrol kad hanya apabila diperlukan.

Dalam tutorial ini, saya akan membimbing anda melalui pelaksanaan susun atur asas skrin papan Trello (lihat contoh di sini). Ini adalah penyelesaian yang responsif, CSS sahaja, dan hanya ciri-ciri struktur susun atur akan dibangunkan.

untuk pratonton, berikut adalah demo codepen hasil akhir.

Selain susun atur grid dan flexbox, penyelesaian menggunakan unit Calc dan Viewport. Untuk menjadikan kod lebih mudah dibaca dan cekap, saya juga akan memanfaatkan pembolehubah SASS.

Tiada kejatuhan disediakan, jadi pastikan untuk menjalankan kod dalam penyemak imbas yang menyokong. Tanpa berleluasa, mari kita menyelam, membangunkan komponen skrin satu demi satu.

Susun atur skrin

Skrin papan Trello terdiri daripada bar aplikasi, bar papan, dan bahagian yang mengandungi senarai kad. Saya akan membina struktur ini dengan rangka markup berikut:

<span><span><span><div</span> class<span>="ui"</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar app"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar board"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><div</span> class<span>="lists"</span>></span>
</span>    <span><span><span><div</span> class<span>="list"</span>></span>
</span>      <span><span><span><header</span>></span>...<span><span></header</span>></span>
</span>      <span><span><span><ul</span>></span>
</span>        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>        ...
        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>      <span><span><span></ul</span>></span>
</span>      <span><span><span><footer</span>></span>...<span><span></footer</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Susun atur ini akan dicapai dengan grid CSS. Khususnya, grid 3 × 1 (iaitu, satu lajur dan tiga baris). Baris pertama adalah untuk bar aplikasi, yang kedua untuk bar papan, dan yang ketiga untuk elemen list.

Dua baris pertama masing -masing mempunyai ketinggian tetap, manakala baris ketiga akan merangkumi selebihnya ketinggian viewport yang ada:

<span>.ui {
</span><span>  <span>height: 100vh;</span>
</span><span>  <span>display: grid;</span>
</span><span>  <span>grid-template-rows: $appbar-height $navbar-height 1fr;</span>
</span><span>}</span>

Unit Viewport memastikan bahawa bekas .ui akan sentiasa setinggi pemandangan pelayar.

Konteks pemformatan grid diberikan kepada bekas, dan baris grid dan lajur yang dinyatakan di atas ditakrifkan. Untuk menjadi lebih tepat, hanya baris yang ditakrifkan kerana tidak perlu mengisytiharkan lajur yang unik. Ukuran baris dilakukan dengan beberapa pembolehubah sass untuk ketinggian bar dan unit FR untuk membuat ketinggian elemen list.

bahagian senarai kad

Seperti yang disebutkan, baris ketiga grid skrin menjadi tuan rumah bekas untuk senarai kad. Inilah garis besar markupnya:

<span><span><span><div</span> class<span>="ui"</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar app"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar board"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><div</span> class<span>="lists"</span>></span>
</span>    <span><span><span><div</span> class<span>="list"</span>></span>
</span>      <span><span><span><header</span>></span>...<span><span></header</span>></span>
</span>      <span><span><span><ul</span>></span>
</span>        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>        ...
        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>      <span><span><span></ul</span>></span>
</span>      <span><span><span><footer</span>></span>...<span><span></footer</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Saya menggunakan kontena baris satu baris flexbox single viewport untuk memformat senarai:

<span>.ui {
</span><span>  <span>height: 100vh;</span>
</span><span>  <span>display: grid;</span>
</span><span>  <span>grid-template-rows: $appbar-height $navbar-height 1fr;</span>
</span><span>}</span>

Menetapkan nilai auto ke harta limpahan-X memberitahu penyemak imbas untuk memaparkan bar skrol mendatar di bahagian bawah skrin apabila senarai tidak sesuai dengan lebar yang disediakan oleh viewport.

Properti Shorthand Flex digunakan pada item Flex untuk membuat senarai

tegar . Nilai auto untuk flex-basis (digunakan dalam diri sendiri) mengarahkan enjin susun atur untuk membaca saiz dari. > Seterusnya saya perlu menambah pemisahan mendatar antara senarai. Jika margin yang betul pada senarai ditetapkan, maka margin selepas senarai terakhir di papan dengan melimpah mendatar tidak diberikan. Untuk membetulkannya, senarai dipisahkan oleh margin kiri dan ruang antara senarai terakhir dan kelebihan viewport yang betul dikendalikan dengan menambahkan :: selepas elemen pseudo kepada setiap elemen. Flex-shrink lalai: 1 mesti ditimpa jika tidak, 'menyerap' pseudo-elemen semua ruang negatif dan ia hilang.

Perhatikan bahawa pada Firefox

Senarai kad

Setiap senarai kad terdiri daripada bar header, urutan kad, dan bar footer. Coretan HTML berikut menangkap struktur ini:

Tugas penting di sini adalah cara menguruskan ketinggian senarai. Header dan footer mempunyai ketinggian tetap (tidak semestinya sama). Kemudian terdapat bilangan kad yang berubah -ubah, masing -masing dengan jumlah kandungan yang berubah -ubah. Jadi senarai tumbuh dan mengecut secara menegak apabila kad ditambah atau dikeluarkan.

<span><span><span><div</span> class<span>="lists"</span>></span>
</span>  <span><span><span><div</span> class<span>="list"</span>></span>
</span>    ...
  <span><span><span></div</span>></span>
</span>  ...
  <span><span><span><div</span> class<span>="list"</span>></span>
</span>    ...
  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Tetapi ketinggian tidak boleh tumbuh selama -lamanya, ia perlu mempunyai had atas yang bergantung pada ketinggian elemen .lists. Sebaik sahaja had ini dicapai, saya mahu bar skrol menegak kelihatan membenarkan akses kepada kad yang melimpah senarai.

Ini kelihatan seperti pekerjaan untuk sifat ketinggian dan limpahan. Tetapi jika sifat -sifat ini digunakan pada bekas akar. List, maka, apabila senarai mencapai ketinggian maksimum, bar skrol muncul untuk semua unsur -unsur, header dan footer yang disertakan. Ilustrasi berikut menunjukkan bar sisi yang salah di sebelah kiri dan yang betul di sebelah kanan:

Oleh itu, mari kita gunakan kekangan ketinggian max kepada Inner

. Nilai mana yang harus digunakan? Ketinggian tajuk dan footer mesti dikurangkan dari ketinggian kontena induk senarai (.lists):

<span><span><span><div</span> class<span>="ui"</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar app"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar board"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><div</span> class<span>="lists"</span>></span>
</span>    <span><span><span><div</span> class<span>="list"</span>></span>
</span>      <span><span><span><header</span>></span>...<span><span></header</span>></span>
</span>      <span><span><span><ul</span>></span>
</span>        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>        ...
        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>      <span><span><span></ul</span>></span>
</span>      <span><span><span><footer</span>></span>...<span><span></footer</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

tetapi ada masalah. Nilai peratusan tidak merujuk kepada .lists tetapi kepada ibu bapa

elemen, .list, dan elemen ini tidak mempunyai ketinggian yang pasti dan oleh itu peratusan ini tidak dapat diselesaikan. Ini boleh diperbaiki dengan membuat .list setinggi .lists:

<span>.ui {
</span><span>  <span>height: 100vh;</span>
</span><span>  <span>display: grid;</span>
</span><span>  <span>grid-template-rows: $appbar-height $navbar-height 1fr;</span>
</span><span>}</span>

Dengan cara ini, kerana .list sentiasa setinggi. List, tanpa mengira kandungannya, harta warna latar belakangnya tidak boleh digunakan untuk warna latar belakang senarai, tetapi mungkin menggunakan anak-anaknya (header, footer, kad ) untuk tujuan ini.

Satu pelarasan terakhir ke ketinggian senarai diperlukan, untuk mengambil kira sedikit ruang ($ jurang) di antara bahagian bawah senarai dan tepi bawah viewport:

<span><span><span><div</span> class<span>="lists"</span>></span>
</span>  <span><span><span><div</span> class<span>="list"</span>></span>
</span>    ...
  <span><span><span></div</span>></span>
</span>  ...
  <span><span><span><div</span> class<span>="list"</span>></span>
</span>    ...
  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Jumlah ketebalan-ketebalan $ scrollbar dikurangkan untuk menghalang senarai daripada menyentuh bar skrol mendatar elemen. Sebenarnya, pada Chrome ini scrollbar 'tumbuh' di dalam kotak list. Iaitu, nilai 100% merujuk kepada ketinggian. List, scrollbar termasuk.

Pada Firefox sebaliknya, bar skrol adalah 'dilampirkan' di luar ketinggian. Jadi penolakan ini tidak diperlukan. Akibatnya, apabila bar skrol dapat dilihat, di Firefox ruang visual di antara sempadan bawah senarai yang telah mencapai ketinggian maksimum dan bahagian atas bar scroll sedikit lebih besar.

Berikut adalah peraturan CSS yang berkaitan untuk komponen ini:

<span>.lists {
</span><span>  <span>display: flex;</span>
</span><span>  <span>overflow-x: auto;</span>
</span>  <span>> * {
</span><span>    <span>flex: 0 0 auto; // 'rigid' lists</span>
</span><span>    <span>margin-left: $gap;</span>
</span>  <span>}
</span><span>  <span>&::after {</span>
</span><span>    <span>content: '';</span>
</span><span>    <span>flex: 0 0 $gap;</span>
</span>  <span>}
</span><span>}</span>

Seperti yang disebutkan, warna latar belakang senarai diberikan dengan memberikan nilai $ senarai-bg-color kepada harta warna latar belakang setiap kanak-kanak elemen. Overflow-y menunjukkan kad scrollbar hanya apabila diperlukan. Akhirnya, beberapa gaya mudah ditambah ke tajuk dan footer.

sentuhan penamat

HTML untuk kad tunggal hanya terdiri daripada item senarai:

<span><span><span><div</span> class<span>="list"</span>></span>
</span>  <span><span><span><header</span>></span>List header<span><span></header</span>></span>
</span>  <span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>    ...
    <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span>  <span><span><span><footer</span>></span>Add a card...<span><span></footer</span>></span>
</span><span><span><span></div</span>></span></span>

atau, jika kad mempunyai imej penutup:

<span>ul {
</span><span>  <span>max-height: calc(100% - #{$list-header-height} - #{$list-footer-height});</span>
</span><span>}</span>

Ini adalah CSS yang berkaitan:

<span><span>.list</span> {
</span>  <span>height: 100%;
</span><span>}</span>

Setelah menetapkan latar belakang, padding, dan margin bawah, susun atur imej penutup sudah siap. Lebar imej mesti merangkumi keseluruhan kad dari tepi padding kiri ke tepi padding kanan:

<span>.list {
</span><span>  <span>height: calc(100% - #{$gap} - #{$scrollbar-thickness});</span>
</span><span>}</span>

Kemudian, margin negatif ditugaskan untuk menyelaraskan imej secara mendatar dan menegak:

<span>.list {
</span><span>  <span>width: $list-width;</span>
</span><span>  <span>height: calc(100% - #{$gap} - #{$scrollbar-thickness});</span>
</span>
  <span>> * {
</span><span>    <span>background-color: $list-bg-color;</span>
</span><span>    <span>color: #333;</span>
</span><span>    <span>padding: 0 $gap;</span>
</span>  <span>}
</span>
  <span>header {
</span><span>    <span>line-height: $list-header-height;</span>
</span><span>    <span>font-size: 16px;</span>
</span><span>    <span>font-weight: bold;</span>
</span><span>    <span>border-top-left-radius: $list-border-radius;</span>
</span><span>    <span>border-top-right-radius: $list-border-radius;</span>
</span>  <span>}
</span>
  <span>footer {
</span><span>    <span>line-height: $list-footer-height;</span>
</span><span>    <span>border-bottom-left-radius: $list-border-radius;</span>
</span><span>    <span>border-bottom-right-radius: $list-border-radius;</span>
</span><span>    <span>color: #888;</span>
</span>  <span>}
</span>
  <span>ul {
</span><span>    <span>list-style: none;</span>
</span><span>    <span>margin: 0;</span>
</span><span>    <span>max-height: calc(100% - #{$list-header-height} - #{$list-footer-height});</span>
</span><span>    <span>overflow-y: auto;</span>
</span>  <span>}
</span><span>}</span>

Nilai margin positif ketiga menjaga ruang antara imej penutup dan teks kad.

Akhirnya, saya telah menambah konteks pemformatan flex ke dua bar yang menduduki baris pertama susun atur skrin. Tetapi mereka hanya dilukis. Jangan ragu untuk membina pelaksanaan anda sendiri dengan memperluaskan demo.

Kesimpulan

Ini hanya satu cara yang mungkin untuk mencapai reka bentuk ini dan ia akan menarik untuk melihat pendekatan lain. Juga, lebih baik untuk memuktamadkan susun atur, contohnya melengkapkan dua bar skrin.

Peningkatan potensi lain boleh menjadi pelaksanaan bar scrolls tersuai untuk senarai kad.

Oleh itu, jangan ragu untuk memadamkan demo dan hantar pautan dalam perbincangan di bawah.

Soalan Lazim (Soalan Lazim) Mengenai Membina Susun atur Trello dengan Grid CSS dan Flexbox

Bagaimana saya boleh membuat susun atur seperti trello menggunakan grid CSS dan Flexbox? Pertama, anda perlu membuat struktur HTML asas untuk susun atur anda. Ini termasuk membuat bekas untuk papan dan bekas individu anda untuk senarai dan kad anda. Seterusnya, anda memohon grid CSS ke bekas papan untuk membuat susun atur grid. Anda kemudian boleh menggunakan Flexbox untuk mengatur senarai dan kad anda dalam bekas masing -masing. Ini membolehkan anda membuat susun atur yang responsif dan fleksibel yang dapat menampung bilangan senarai dan kad. CSS Grid dan Flexbox menawarkan beberapa faedah untuk membuat susun atur seperti trello. Mereka membolehkan anda membuat susun atur responsif yang boleh menyesuaikan diri dengan saiz dan orientasi skrin yang berbeza. Mereka juga menyediakan sistem susun atur yang fleksibel yang dapat menampung bilangan senarai dan kad. Di samping itu, mereka menawarkan kawalan penjajaran dan pengedaran yang kuat, menjadikannya mudah untuk membuat susun atur yang bersih dan teratur. Grid dan Flexbox adalah sistem susun atur yang serba boleh yang boleh digunakan untuk membuat pelbagai susun atur. Mereka boleh digunakan secara individu atau dalam kombinasi untuk membuat susun atur yang rumit dan responsif. Sama ada anda membuat susun atur dua lajur yang mudah atau susun atur grid yang kompleks, grid CSS dan Flexbox dapat menyediakan alat yang anda perlukan.

Membuat responsif susun atur seperti trello anda menggunakan grid CSS dan Flexbox melibatkan menggunakan pertanyaan media untuk menyesuaikan susun atur anda berdasarkan saiz skrin. Anda boleh menggunakan pertanyaan media untuk menukar bilangan lajur grid atau menyesuaikan sifat flex senarai dan kad anda. Ini membolehkan susun atur anda menyesuaikan diri dengan saiz dan orientasi skrin yang berbeza, memastikan pengalaman pengguna yang konsisten di semua peranti. Susun atur seperti Trello boleh dicapai menggunakan JavaScript. Anda boleh menggunakan JavaScript untuk menambah fungsi drag-and-drop ke kad anda, yang membolehkan pengguna memindahkan kad antara senarai. Anda juga boleh menggunakan JavaScript untuk menambah ciri interaktif lain, seperti keupayaan untuk menambah kad atau senarai baru.

Adakah terdapat sebarang batasan untuk menggunakan grid CSS dan Flexbox untuk membuat susun atur seperti trello? Sebagai contoh, mereka mungkin tidak disokong sepenuhnya dalam pelayar yang lebih tua. Di samping itu, semasa mereka menyediakan sistem susun atur yang fleksibel, mereka mungkin tidak sesuai untuk semua jenis susun atur. Penting untuk memahami batasan-batasan ini dan pertimbangkan penyelesaian alternatif jika perlu. menggunakan CSS. Anda boleh menggunakan CSS untuk menukar warna, fon, dan elemen visual lain susun atur anda. Anda juga boleh menggunakan CSS untuk menambah kesan, seperti bayang-bayang atau peralihan, untuk meningkatkan pengalaman pengguna. 🎜> Walaupun grid CSS dan Flexbox adalah ciri CSS yang agak maju, mereka dapat dipelajari dengan beberapa kajian dan amalan. Terdapat banyak sumber yang tersedia dalam talian, termasuk tutorial dan panduan, yang dapat membantu anda mempelajari cara menggunakan ciri -ciri ini. Dengan beberapa masa dan usaha, anda boleh membuat susun atur seperti trello menggunakan grid CSS dan Flexbox, walaupun anda seorang pemula. 🎜> Masalah penyelesaian masalah dengan susun atur seperti trello anda boleh dilakukan menggunakan alat pemaju dalam penyemak imbas anda. Alat ini membolehkan anda memeriksa HTML dan CSS anda, menjadikannya lebih mudah untuk mengenal pasti dan membetulkan isu -isu. Anda juga boleh menggunakan forum atau komuniti dalam talian, seperti Stack Overflow, untuk bertanya dan mendapatkan bantuan daripada pemaju lain. Susun atur seperti Trello untuk prestasi boleh melibatkan beberapa strategi. Ini termasuk meminimumkan CSS dan JavaScript anda, menggunakan pemilih CSS yang cekap, dan mengoptimumkan imej anda. Anda juga boleh menggunakan alat prestasi, seperti Google Lighthouse, untuk menganalisis susun atur anda dan mengenal pasti kawasan untuk penambahbaikan.

Atas ialah kandungan terperinci Membina susun atur trello dengan grid css dan flexbox. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!