Pengetahuan terperinci tentang susun atur grid CSS yang anda tidak boleh ketinggalan!

Artikel ini akan berkongsi dengan anda beberapa perkara pengetahuan tentang reka letak grid CSS dan membawa anda untuk mengetahui lebih lanjut tentang reka letak grid CSS saya harap ia akan membantu anda!

Hari ini, terdapat banyak ciri yang boleh digunakan untuk reka letak web moden Mungkin yang paling terkenal ialah Flexbox, dan semua orang berpendapat bahawa susun atur Flexbox boleh diselesaikan dengan mudah . Walaupun reka letak Flexbox sangat berkuasa, ia masih merupakan reka letak satu dimensi Untuk beberapa senario reka letak dua dimensi, ia masih mempunyai had yang besar. Ini juga menunjukkan bahawa Grid CSS masih diperlukan dalam reka letak Web moden atau penyelesaian reka letak masa hadapan Lagipun, setakat ini, ia adalah satu-satunya teknologi yang menyokong reka letak dua dimensi. Pada tahun 2021, saya menghabiskan beberapa bulan menyemak semua yang berkaitan dengan Grid CSS dan menerangkan Grid CSS melalui lebih daripada 20 artikel. Boleh dikatakan siri ini merupakan pengenalan yang paling sistematik kepada CSS Grid di seluruh Internet. Jika saya masih belum terdedah kepadanya, atau mempunyai ketakutan tertentu terhadap CSS Grid, siri ini berbaloi dengan masa anda.

Istilah penting dalam Grid CSS

Mana-mana modul berfungsi mempunyai istilah profesionalnya sendiri, dan Grid CSS tidak terkecuali bahawa istilah teknikal Grid CSS merangkumi julat yang lebih luas. Dalam artikel ini, istilah berkaitan dalam Grid CSS diterangkan secara terperinci, seperti paksi grid, bekas grid, item grid, garis grid, sel grid, trek grid, kawasan grid, grid eksplisit , grid tersirat, jarak grid (slot grid), subgrid dan grid bersarang, dsb.

Sifat dan dimensi grid

Selepas anda mempunyai pemahaman tertentu tentang istilah teknikal yang berkaitan dengan reka letak Grid CSS, anda boleh mula untuk benar-benar Belajar tentang sifat yang tersedia dalam Grid CSS. Dalam bahagian ini, kami terutamanya akan membincangkan dengan anda sifat yang boleh digunakan untuk bekas grid dan menetapkan saiz bekas grid dan item grid. Untuk tujuan ini kita boleh mentakrifkan grid eksplisit menggunakan sifat seperti grid-template-lajur, grid-template-rows dan grid-template-kawasan.

Tetapan saiz trek grid

lajur-templat-grid dan templat-grid boleh digunakan secara eksplisit dalam CSS Grid -rows membolehkan anda mentakrifkan trek grid secara eksplisit. Walau bagaimanapun, dalam bahagian ini, kami terutamanya membincangkan dengan anda unit yang boleh digunakan untuk menetapkan saiz trek grid, terutamanya unit unik fr dalam Grid CSS.

Tentukan dimensi trek grid menggunakan dimensi intrinsik

Selain lajur-templat-grid dan baris-baris-templat grid, anda boleh penggunaan Selain menetapkan saiz trek grid dalam unit panjang (), unit peratusan () dan unit faktor keanjalan (fr), anda juga boleh menggunakan beberapa kata kunci (contohnya, tiada, auto, min -content, max -content, fit-content dan fit-content()) untuk menetapkan saiz trek grid. Antaranya, kandungan min, kandungan maksimum dan kandungan muat juga dipanggil menggunakan dimensi intrinsik untuk menetapkan saiz trek grid.

Fungsi yang tersedia dalam grid

Selain menggunakan nilai panjang tetap dalam lajur grid-template dan grid- template-rows , nilai dinamik dan beberapa kata kunci untuk menetapkan saiz trek grid (iaitu, gunakan dimensi ekstrinsik dan intrinsik untuk menetapkan saiz trek grid). Kami juga boleh menggunakan beberapa fungsi dalam Grid CSS, seperti minmax(min, max), repeat() dan fungsi perbandingan CSS (seperti min(), max() dan clamp() fungsi) untuk menetapkan saiz trek grid, dan malah Fungsi-fungsi ini juga boleh bersarang antara satu sama lain.

Grid eksplisit dan grid tersirat

Menggunakan lajur grid-template, baris-template-grid dan kawasan-template-grid boleh mentakrifkan grid eksplisit secara eksplisit. Selain itu, anda boleh menggunakan grid-auto-lajur, grid-auto-baris dan grid-auto-aliran untuk menentukan grid tersirat.

Penempatan automatik item grid

Dalam susun atur Grid CSS, gunakan baris grid, lajur grid dan Sifat seperti kawasan grid boleh meletakkan item grid secara eksplisit pada lokasi tertentu dalam grid. Selain itu, spesifikasi susun atur Grid CSS juga mengandungi satu lagi set peraturan untuk menetapkan cara item grid yang tidak ditetapkan secara eksplisit kedudukan harus diletakkan. Iaitu, gunakan grid-auto-flow untuk menetapkan peletakan grid automatik.

Garis grid dalam susun atur grid

Dalam sistem grid CSS, garis grid merupakan konsep yang sangat penting. Secara lalai, setiap kali sistem grid ditakrifkan, nama baris grid berangka (nama baris grid baris dan nama baris grid lajur) dicipta secara lalai. Selain itu, anda juga boleh menentukan nama untuk garis grid dalam kurungan segi empat sama [] dalam lajur-templat-grid dan baris-templat-grid. Seperti yang dinyatakan sebelum ini, sistem grid CSS dibahagikan kepada grid eksplisit dan grid tersirat Begitu juga, garis grid juga dibahagikan kepada garis grid eksplisit dan garis grid tersirat, yang terletak pada grid eksplisit. dan garisan grid yang terletak pada grid tersirat dipanggil garisan grid tersirat. Dan dalam sistem grid, garisan grid amat diperlukan apabila meletakkan item grid dengan jelas Dalam erti kata lain, penamaan garis grid secara langsung akan mempengaruhi penempatan item grid kami. Dalam artikel ini, kami terutamanya akan membincangkan dengan anda cara menamakan garis grid? Jika berminat, sila teruskan membaca.

Garis grid sangat penting dalam sistem susun atur grid. Walaupun kandungan sebelumnya tidak menghuraikan pengetahuan berkaitan garis grid dalam sistem susun atur grid, tidak sukar untuk mencari lajur-templat-grid, baris-templat-grid, kawasan-templat-grid, Sifat seperti grid- lajur automatik, baris-auto-grid dan aliran-auto-grid akan mencipta garisan grid, dan lajur-grid, baris-grid dan kawasan-grid pada item grid boleh meletakkan grid melalui projek kekisi dan membuka genap lebih banyak kemungkinan apabila mencipta sistem susun atur. Dalam bahagian ini, kita akan melihat dengan lebih dekat pelbagai cara untuk menamakan grid dalam susun atur grid CSS, dan beberapa kemungkinan menarik yang timbul daripadanya.

Letakkan item grid

Selain meletakkan item grid secara automatik dalam Grid CSS (biasanya menggunakan grid-auto-rows, In tambahan kepada grid-auto-columns dan grid-auto-flow), anda juga boleh menggunakan baris grid, lajur grid dan kawasan grid secara eksplisit untuk menetapkan nama garis grid pada item grid untuk meletakkan item grid secara eksplisit.

Algoritma peletakan automatik untuk item grid

Dalam susun atur grid CSS, kita boleh mempunyai banyak cara untuk meletakkan item grid Secara eksplisit meletakkannya di lokasi yang ditetapkan. Contohnya:

• Gunakan grid-row-start, grid-row-end, grid-column-start dan grid-column-end untuk menentukan nama garis grid dan letakkan item grid
• Gunakan grid-row-start, grid-row-end, grid-column-start dan grid-lajur-hujung sifat singkatan grid-row dan lajur grid untuk menentukan nama garis grid dan meletakkan item grid
• Gunakan kawasan grid untuk menentukan nama grid atau nyatakan nama kawasan grid yang ditakrifkan oleh kawasan templat grid dan letakkan item grid
• dalam grid-row-start, grid-row-end, grid- lajur-mula, grid-lajur-akhir atau grid-baris, grid-lajur menentukan nama garis grid, dan rentang digunakan untuk menentukan sel grid yang digabungkan. Gabungan mereka untuk meletakkan item grid
• dalam grid-row-start, grid-row-end, grid-column-start, grid-column-end (dan atribut trengkas mereka grid-row, grid-column ) atau nama garis grid yang ditakrifkan oleh baris-templat-grid, lajur-templat-grid dan kawasan-templat-grid yang dinyatakan dalam kawasan grid, letakkan item grid
• menggunakan nama baris grid yang dinamakan dan kata kunci span, letakkan item grid
• Nyatakan nama kawasan grid yang dicipta oleh kawasan templat grid atau baris templat grid dan lajur templat grid dalam kawasan grid, letakkan item grid

Namun, dalam sistem susun atur grid, penempatan item grid mempunyai algoritma matangnya sendiri. Dalam bab ini, kami membahagikannya kepada lima langkah untuk bercakap tentang algoritma penempatan item grid Grid CSS (peletakan automatik dan peletakan eksplisit).

Pertindihan item grid dan tahap paksi z

Item grid boleh menggunakan Ciri baris grid, lajur grid dan kawasan grid seperti Kedudukan Item Grid secara eksplisit menentukan kedudukan item grid berdasarkan nama baris grid. Ini membolehkan item grid bertindih antara satu sama lain. Dalam erti kata lain, dalam Grid CSS, anda boleh menggunakan kaedah berikut untuk membuat item grid bertindih antara satu sama lain:

• Gunakan nombor indeks baris grid
• Gunakan garis grid bernama
• Gunakan kawasan grid yang dinamakan
• Gabungkan sel grid (iaitu, merentas item grid)

Lebih menarik lagi, item grid CSS tidak Anda perlu menetapkan kedudukan secara eksplisit kepada bukan -nilai statik untuk mencetuskan indeks-z untuk berkuat kuasa Maksudnya, apabila item grid bertindih, anda boleh menetapkan indeks-z secara langsung pada item grid untuk mengawal paksi-z bagi item grid.

Penjajaran dan Jarak dalam Reka Letak Grid

Jika anda biasa dengan penjajaran dalam susun atur Flexbox, maka Grid CSS Penjajaran dalam ialah mudah dikuasai. Kerana ia sangat serupa dengan Flexbox, kedua-duanya menggunakan ciri dalam spesifikasi Modul Penjajaran Kotak CSS Tahap 3. Dalam bab ini, penjajaran item grid dan trek grid dalam susun atur grid diperkenalkan secara terperinci Selain itu, hubungan antara penjajaran dan margin (cara menggunakan margin untuk menetapkan penjajaran item grid) juga diperkenalkan.

Selain itu, pada penghujung artikel, atribut gap juga diperkenalkan, iaitu cara menggunakan gap untuk menetapkan jarak antara trek grid (biasanya dikenali sebagai saiz slot grid).

Nisbah Aspek Projek Grid

Dalam bab ini kami membincangkan nisbah lebar dan ketinggian projek grid dengan anda tetapan nisbah tinggi, iaitu, aplikasi nisbah aspek atribut CSS dalam grid. Selain itu, ia juga memperkenalkan padding-top atau padding-bottom serta sifat tersuai CSS dan fungsi calc() untuk melaksanakan nisbah aspek item grid.

Mod penulisan dalam grid

Dalam artikel ini saya terutamanya bercakap dengan anda tentang logik CSS Kesan daripada atribut dan mod penulisan CSS pada reka letak grid. Contohnya, hubungan antara peletakan automatik item grid dan mod penulisan, hubungan antara meletakkan item grid berdasarkan garis grid dan mod penulisan, dan hubungan antara kawasan grid dan mod penulisan, dsb.

Grid bersarang vs. subgrid

Sejak sekian lama, terdapat banyak perbincangan mengenai penggunaan subgrid dan bagaimana untuk melaksanakannya Terdapat banyak perbincangan tentang isu tersebut dan juga beberapa perdebatan tentang sama ada ia diperlukan. Banyak perbincangan adalah mengenai dua kaedah lain yang menangani banyak masalah yang sama seperti subgrid: grid bersarang dan paparan: kandungan. Artikel ini menggunakan grid bersarang sebagai titik masuk, dan menghuraikan grid bersarang dan subgrid secara mendalam, iaitu, kita akan memahami perkara yang serupa dan apakah perbezaan antara grid subgrid dan grid bersarang? Serta menyatakan bahawa terdapat beberapa kes yang sangat cekap di mana subgrid benar-benar diperlukan, manakala dalam kes lain ia tidak begitu diperlukan tetapi akan membawa kepada penyelesaian yang lebih bersih.

subgrid vs paparan: kandungan

subgrid Sebelum memasuki spesifikasi Tahap 2 modul susun atur Grid CSS, grid bersarang, subgrid Terdapat perbincangan mendalam dengan paparan: kandungan, dan akhirnya subgrid menerima lebih banyak sokongan dan akhirnya menjadi sebahagian daripada spesifikasi. Dalam erti kata lain, kedua-dua grid bersarang dan paparan: kandungan boleh mencapai reka letak seperti subgrid. Dalam bab ini, mari kita bincangkan dengan anda apakah perbezaan antara paparan: kandungan dan subgrid?

Reka letak Waterfall

Memandangkan susun atur berbilang lajur, susun atur Flexbox dan susun atur Grid disokong oleh penyemak imbas, anda boleh menggunakan ciri ini untuk mencapai Waterfall susun atur aliran, tetapi susun atur aliran air terjun yang dilaksanakan oleh teknologi ini mempunyai lebih kurang kecacatan tertentu. Walau bagaimanapun, untungnya, Modul Tata Letak Grid CSS Tahap 3 menggabungkan reka letak aliran air terjun sebenar ke dalam spesifikasi W3C, yang boleh dipanggil reka letak aliran air terjun sebenar. Malangnya, tidak banyak penyemak imbas arus perdana yang menyokong spesifikasi draf ini, hanya Firefox dan Firefox Nightly. Walaupun ciri ini belum sedia untuk kegunaan pengeluaran, percubaan dan maklum balas anda selepas digunakan adalah berharga untuk memastikan ciri ini memenuhi keperluan anda untuk reka letak ini.

Pemeriksa grid melaraskan reka letak grid

Daripada kandungan di atas, tidak sukar untuk mencari kerumitan reka letak grid . Saya rasa semua orang telah menyedari bahawa selepas ketibaan CSS Grid, kaedah mereka bentuk susun atur dalam Web juga telah berubah. Kita boleh melakar susun atur di atas kertas dan memikirkan tentang reka bentuk susun atur. Apabila anda mula menaip kod, anda sudah tahu rupa susun aturnya. Kerana kerumitan susun atur Grid CSS, dan hakikat bahawa grid yang ditakrifkan pada bekas grid tidak kelihatan. Atas sebab ini, kita perlu mempertimbangkan cara menggunakan grid dengan lebih mudah, atau cara menyahpepijat pepijat berkaitan reka letak grid. Pelajar yang biasa dengan pembangunan web tahu bahawa apabila menyahpepijat reka letak atau isu berkaitan CSS, mereka suka menambah sempadan pada elemen. Dalam reka letak grid, walaupun kaedah yang serupa boleh digunakan untuk menambah sempadan pada bekas grid dan item grid untuk membantu kami meletakkan kedudukan dengan cepat, kami tidak boleh menambah sempadan pada garisan grid. Nasib baik, penyemak imbas arus perdana semasa, seperti Chrome, Firefox, Safari dan alat pembangun penyemak imbas Microsoft Edge (DevTools) semuanya menyediakan pemeriksa susun atur grid. Dengan alatan ini, kami boleh membantu kami menggunakan grid dan masalah nyahpepijat yang dihadapi semasa menggunakan grid.

Kes dan ciri susun atur grid

Kemunculan modul Grid CSS dan sokongan penyemak imbas untuknya menyediakan cara baharu untuk Web susun atur Kemungkinan yang tidak pernah berlaku sebelum ini. Kita boleh membina reka bentuk yang lebih kompleks dengan elemen yang lebih sedikit (struktur HTML yang lebih mudah). Ini jauh lebih berkuasa daripada Flexbox, yang selalu kami anggap sangat berkuasa. Tetapi apabila anda memikirkan Grid CSS, anda biasanya memikirkan susun atur segi empat sama yang biasa kita lakukan, bukan? @Andy Barefoot menyediakan banyak kesan susun atur responsif kreatif pada tapak web peribadinya dan Codepen, yang akan memberikan anda rasa yang sama sekali baru untuk reka letak Web, rasa serupa dengan reka bentuk Web klasik anda (susun atur segi empat sama biasa), dan Dia menggunakan susun atur Grid CSS untuk buat ini.

Menggunakan pembinaan grid untuk membina susun atur bertindih

Dalam susun atur Grid CSS, kita boleh meletakkan item grid, Biarkan elemen berbeza bertindih setiap satu lain, dan mengawal susunan susunan item grid pada paksi-z melalui indeks-z CSS. Dalam erti kata lain, susun atur yang dahulunya dilaksanakan menggunakan kedudukan mutlak kedudukan CSS kini boleh diselesaikan terus menggunakan Grid CSS. Dalam kes ini, kami terutamanya melihat cara menggunakan Grid CSS untuk mencapai kesan reka letak tindanan elemen.

Bina susun atur Full-Bleed menggunakan grid

Full-Bleed adalah satu konsep dalam dunia percetakan, dikenali sebagai full bleed, iaitu dalam percetakan, kita ada bleed iaitu kawasan di luar tempat kertas dipangkas. Oleh sebab itu, pereka cetakan biasa mempertimbangkan bleed dalam kerja reka bentuk mereka. Kami melakukan ini dengan menyediakan zon selamat. Dalam beberapa tahun kebelakangan ini, konsep yang dipanggil "full bleed" ini juga telah digunakan pada susun atur Web. Ini ialah reka letak yang menggunakan elemen lebar penuh dalam lajur lebar terhad, seperti imej tepi ke tepi dalam lajur teks yang lebih sempit. Dalam komuniti, sesetengah orang turut memanggil kesan reka letak ini susun atur Lebar Penuh, dan sesetengah orang memanggilnya susun atur Edge-To-Edge. Sejujurnya, tidak sukar untuk mencapai kesan reka letak ini di Web Terdapat banyak penyelesaian teknikal yang berbeza dalam komuniti yang boleh mencapai kesan reka letak ini. Walau bagaimanapun, hari ini, kami memikirkannya dari sudut yang berbeza!

Menggunakan grid untuk membina susun atur silang

Kes ini adalah untuk memperkenalkan satu lagi susun atur grid yang dibina oleh CSS Grid, iaitu, susun atur silang. Kes ini akan membantu kami lebih memahami cara sifat Grid CSS yang berkaitan digunakan dalam amalan (reka letak web).

Gunakan grid untuk membina susun atur majalah dan akhbar

Sejak sekian lama, segi empat tepat telah digunakan dalam susun atur Web Tunjukkan Kesan UI kepada pengguna, dan ini juga berlaku dalam kesedaran ramai pembangun Web. Susun atur Web tidak boleh memecahkan had susunan segi empat tepat! Tetapi kelajuan pembangunan teknologi Web adalah menakjubkan, dan perkara baharu muncul di hadapan kita setiap hari. Dalam beberapa tahun yang singkat, terdapat begitu banyak ciri baharu untuk reka letak web. Dalam erti kata lain, jika pereka memberitahu anda hari ini: "Sayang, mari buat susun atur yang serupa dengan majalah atau akhbar"! Anda dengan senang hati akan berkata OK! Iaitu, menggunakan ciri baharu semasa boleh memecahkan had bingkai segi empat tepat, membolehkan anda mencapai reka letak seperti majalah di Web.

(Mempelajari perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Pengetahuan terperinci tentang susun atur grid CSS yang anda tidak boleh ketinggalan!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!