Memindahkan Item dalam Layout Grid CSS [Panduan]
Menggunakan Modul Layout Grid CSS dalam reka bentuk web menjadi lebih dan lebih layak apabila lebih banyak pelayar bermula menyokongnya. Semasa membuat susun atur mengisi sel-sel grid, mungkin ada saatnya, apabila anda ingin mencapai perkara-perkara yang lebih rumit.
Sebagai contoh, anda mungkin mahu sedikit bergerak beberapa barangan grid yang tersekat di kawasan grid mereka. Anda juga mungkin mahu alihkan mereka keluar dari bekas grid (limpahan), atau antara satu sama lain (tumpang tindih), atau hanya ... ke ruang yang kosong.
Oleh itu, dalam jawatan ini, saya akan menunjukkan kepada anda bagaimana anda boleh memindahkan, memerintahkan, melimpah, tumpang tindih dan saiz grid apabila anda menggunakan Modul Layout Grid CSS.
Buat grid CSS
Pertama, mari buat grid CSS mudah dengan satu baris dan tiga lajur.
Dalam HTML, kami membuat sekumpulan div di mana bekas grid mengandungi tiga perkara grid.
Dalam CSS, bekas grid mempunyai paparan: grid; harta dan barangan grid mempunyai grid-area yang mengenal pasti nama-nama kawasan item grid.
Kita juga tambahkan grid-template-areas harta ke bekas grid, di mana nama kawasan grid digunakan tetapkan kawasan grid ke sel grid yang mereka wakili.
Semua lajur mengambil saiz satu pecahan (fr) dari lebar kontena, memastikan penahanan item grid.
.grid-container display: grid; grid-template-areas: 'left center right'; grid-template-columns: repeat (3, 1fr); grid-template-row: 80px; grid-jurang: 5px; lebar: 360px; warna latar belakang: magenta; .grid-left grid-area: left; .grid-center grid-area: center; .grid-kanan grid-area: right; .grid-container div background-color: lightgreen;
Item grid limpahan
Anda boleh membuat item grid melimpahan kontena gridnya jika perlu untuk susun atur. Untuk mencapai kesan limpahan, anda hanya perlu gunakan saiz lajur yang berbeza:
.grid-container display: grid; grid-template-areas: 'left center right'; grid-template-columns: repeat (3, 150px); grid-jurang: 5px;
The jumlah kolum dan saiz jurang adalah lebih besar daripada yang lebar bekas, yang menyebabkan item grid mengalir bekas mereka.
Item grid bertindih
A item grid boleh bertindih (tutup sepenuhnya atau sebahagian) item grid lain dalam kes berikut:
- Ia ditetapkan untuk menjangkau (dan lebih) sel (s) daripada item grid lain.
- Saiznya telah meningkat, menyebabkan ia bertindih dengan item grid berdekatan.
- Ia bergerak di atas item grid lain.
Kami akan membincangkan kes kedua dan ketiga kemudian, di “Saiz” dan “Bergerak” bahagian.
Pertama, mari kita lihat kes pertama apabila item grid merentasi satu sama lain.
Item grid di tengah mempunyai merangkumi ke kiri, jadi hanya dua item yang boleh dilihat pada skrin.
.grid-center grid-area: center; grid-column: 1/3;
The grid-kolom dan grid-baris hartanah tetapkan garis grid antara mana satu lajur atau baris perlu dipadankan.
Diagram rajah di bawah, anda boleh melihat bagaimana grid-kolom: 1/3 Peraturan peraturan CSS: lajur tengah merentang antara garisan grid 1 dan 3. Akibatnya, kolum tengah bertindih di sebelah kiri.
Pindah item grid
Dengan bergerak, maksud saya memindahkan barang-barang sedikit di sekeliling. Jika anda benar-benar mahu memindahkan item ke sel grid / kawasan lain, saya cadangkan anda mengemas kini kod penciptaan grid.
Bergerak di sekitar barangan grid adalah mudah. Hanya menggunakan margin, yang ubah, atau kedudukan: relatif; hartanah. Lihat di bawah bagaimana item dialihkan menggunakan sifat tersebut.
Item grid tengah dan kanan boleh dipindahkan (seperti ditunjukkan di atas) dengan cara berikut:
1. Menggunakan margin
Margin negatif meningkatkan dimensi item grid, sementara margin positif mengurangkan mereka. Dengan menggunakan gabungan kedua-duanya, anda boleh memindahkan item grid sekitar.
.grid-center grid-area: center; margin-left: -10px; margin-right: 10px; margin-top: -10px; margin-bottom: 10px; .grid-kanan grid-area: right; margin-left: 10px; margin-right: -10px; margin-top: -10px; margin-bottom: 10px;
2. Menggunakan ubah
The menterjemah () Fungsi CSS bergerak elemen di sepanjang paksi x dan y. Menggunakannya bersama-sama dengan ubah harta membolehkan anda mengubah kedudukan item grid.
.grid-center grid-area: center; ubah: menterjemah (-10px, -10px); .grid-kanan grid-area: right; ubah: menterjemah (10px, -10px);
3. Menggunakan kedudukan
Menggunakan kedudukan: relatif; memerintah dengan yang ditentukan atas, bawah, ditinggalkan, dan betul Ciri-ciri boleh digunakan untuk bergerak di sekitar item grid juga.
.grid-center grid-area: center; kedudukan: relatif; bawah: 10px; kanan: 10px; .grid-kanan grid-area: right; kedudukan: relatif; bawah: 10px; kiri: 10px;
Item grid pesanan
Item grid diberikan pada skrin mengikut urutan yang dipaparkan dalam kod sumber HTML.
Dalam bahagian sebelumnya, apabila item tengah dipindahkan ke kiri, ia diletakkan di atas item kiri oleh penyemak imbas. Ini berlaku kerana dalam HTML, Walau bagaimanapun, kita boleh ubah item grid pesanan menggunakan Menggunakan Seperti dalam modul Layout CSS Grid, mengubah susunan elemen dalam HTML tidak menjejaskan susun atur grid, anda juga boleh meletakkan Jika anda menggunakan baris atau lajur bersaiz automatik untuk item grid (menggunakan Ingat, dalam grid contoh kami, ketiga-tiga lajur mengambil satu pecahan ( Di sini, kita menukar saiz item kiri menggunakan Di sini, kita menukar saiz item kiri menggunakan z-indeks atau perintah Sifat CSS.
z-indeks: 1; peraturan, item grid kiri mendapat konteks yang disusun lebih tinggi.. grid-kiri grid-area: left; z-indeks: 1;
Item grid saiz
auto, fr, gr unit), ia akan mengecut untuk menjadikan ruang bagi item jirannya yang telah berkembang hanya jika kata item tidak bersaiz oleh ubah atau margin negatif.fr) bekas grid. Lihatlah bagaimana ketiga-tiga perkara tersebut kelihatan seperti kiri yang diubah saiznya dalam dua cara yang berbeza.1. bersaiz dengan
lebar dan ketinggianlebar dan ketinggian hartanah. Hasilnya, ia kekal di dalam bekas grid.
.grid-kiri grid-area: left; lebar: 200px; ketinggian: 90px;
2. bersaiz dengan
ubahubah harta. Akibatnya, ia melimpahi kontena dan jurang grid juga hilang.
.grid-kiri grid-area: left; mengubah: scalex (1.8);
