Memindahkan Item di Layout Kotak CSS [Panduan]
Menggunakan Modul Tata Letak Kotak CSS dalam desain web menjadi lebih dan lebih layak karena semakin banyak browser mulai dukung itu. Saat membuat tata letak yang mengisi sel-sel kisi, mungkin ada saatnya, ketika Anda ingin mencapai hal-hal yang lebih rumit.
Misalnya, Anda mungkin mau sedikit bergerak beberapa item kisi macet di area kisi mereka. Anda mungkin juga mau pindahkan mereka dari wadah kotak (meluap), atau satu sama lain (tumpang tindih), atau hanya ... ke beberapa ruang kosong di sekitar.
Jadi, dalam posting ini, saya akan menunjukkan kepada Anda bagaimana Anda bisa memindahkan, memesan, melimpah, tumpang tindih, dan item ukuran kotak saat Anda menggunakan Modul Tata Letak Kotak CSS.
Buat kisi CSS
Pertama, mari kita buat dengan kotak CSS sederhana satu baris dan tiga kolom.
Dalam HTML, kami membuat banyak divs di mana wadah kotak berisi tiga item kisi.
Dalam CSS, kotak kisi memiliki tampilan: kotak; milik dan item kisi memiliki area grid yang mengidentifikasi nama area item kisi.
Kami juga Tambahkan kotak-templat-bidang milik ke wadah kotak, di mana nama area kotak digunakan untuk tetapkan area grid ke sel-sel grid yang diwakilinya.
Semua kolom ambil ukuran satu fraksi (fr) lebar kontainer, memastikan kontainmen item kisi.
.grid-container display: grid; grid-templat-area: 'kiri tengah kanan'; grid-template-kolom: repeat (3, 1fr); grid-template-rows: 80px; celah jaringan: 5px; lebar: 360px; warna latar belakang: magenta; .grid-left area-grid: kiri; .grid-center area-grid: pusat; .grid-right area-grid: kanan; .grid-container div background-color: lightgreen;
Mengalir item grid
Anda dapat membuat item kisi melimpahi wadah gridnya jika perlu untuk tata letak. Untuk mencapai efek overflow, Anda hanya perlu gunakan ukuran kolom yang berbeda:
.grid-container display: grid; grid-templat-area: 'kiri tengah kanan'; grid-templat-kolom: repeat (3, 150px); celah jaringan: 5px;
Itu jumlah kolom dan ukuran celah lebih besar dari lebar wadah, yang menyebabkan item kotak meluap wadah mereka.
Tumpang tindih item kisi
SEBUAH item grid dapat tumpang tindih (sepenuhnya atau sebagian menutupi) item grid lain dalam kasus berikut:
- Ini diatur untuk menjangkau (dan lebih) sel (s) dari item kisi lain.
- Ukurannya telah meningkat, menyebabkannya tumpang tindih dengan item kisi di dekatnya.
- Itu dipindahkan di atas item kotak lain.
Kami akan membahas kasus kedua dan ketiga nanti, di “Perekat” dan “Bergerak” bagian.
Pertama, mari kita lihat case pertama ketika item grid membentang di satu sama lain.
Item kisi di pusat memiliki membentang di sebelah kiri, jadi hanya dua item yang terlihat di layar.
.grid-center grid-area: center; kotak-kolom: 1/3;
Itu kotak-kolom dan kisi-kisi properti menetapkan garis kisi di mana kolom atau baris harus sesuai.
Pada diagram di bawah ini, Anda dapat melihat caranya kisi-kolom: 1/3 Aturan CSS berfungsi: kolom tengah rentang antara garis grid 1 dan 3. Akibatnya, kolom tengah tumpang tindih dengan yang kiri.
Pindahkan item kisi
Dengan bergerak, maksudku memindahkan barang sedikit di sekitar. Jika Anda benar-benar ingin memindahkan item ke sel / area kisi lain, saya sarankan Anda memperbarui kode pembuatan kisi.
Bergerak di sekitar item kisi sederhana. Hanya menggunakan batas, itu mengubah, atau posisi: relatif; properti. Lihat di bawah ini bagaimana item dipindahkan menggunakan properti itu.
Item tengah dan kotak kanan dapat dipindahkan (seperti yang ditunjukkan di atas) dengan cara berikut:
1. Menggunakan batas
Margin negatif meningkatkan dimensi item kisi, sementara margin positif memangkasnya. Dengan menggunakan kombinasi keduanya, Anda dapat dengan perlahan memindahkan item grid.
.grid-center grid-area: center; margin-left: -10px; margin-right: 10px; margin-top: -10px; margin-bottom: 10px; .grid-right area-grid: kanan; margin-kiri: 10px; margin-right: -10px; margin-top: -10px; margin-bottom: 10px;
2. Menggunakan mengubah
Itu menterjemahkan() Fungsi CSS memindahkan elemen di sepanjang sumbu x dan y. Menggunakannya bersama dengan mengubah properti memungkinkan Anda untuk mengubah posisi item kisi.
.grid-center grid-area: center; transform: translate (-10px, -10px); .grid-right area-grid: kanan; transform: translate (10px, -10px);
3. Menggunakan posisi
Menggunakan posisi: relatif; aturan dengan yang ditentukan teratas, bawah, kiri, dan kanan properti dapat digunakan untuk bergerak di sekitar item kotak juga.
.grid-center grid-area: center; posisi: relatif; bawah: 10px; kanan: 10px; .grid-right area-grid: kanan; posisi: relatif; bawah: 10px; kiri: 10px;
Pesan item kisi
Item kisi ditampilkan di layar dalam urutan mereka muncul dalam kode sumber HTML.
Di bagian sebelumnya, ketika item tengah dipindahkan ke kiri, itu ditempatkan di atas item kiri oleh browser. Ini terjadi karena dalam HTML, Namun, kita bisa ubah item kisi pesanan menggunakan Menggunakan Seperti dalam modul Layout Kotak CSS, mengubah urutan elemen dalam HTML tidak memengaruhi tata letak kisi, Anda juga bisa menaruh Jika Anda menggunakan baris atau kolom berukuran otomatis untuk item kisi (menggunakan Ingat, dalam kisi sampel kami, ketiga kolom mengambil satu fraksi ( Di sini, kami mengubah ukuran item kiri menggunakan Di sini, kami mengubah ukuran item kiri menggunakan indeks-z atau memesan Properti CSS.
z-index: 1; aturan, item kotak kiri mendapat konteks susun yang lebih tinggi.. kisi-kiri kisi-area: kiri; z-index: 1;
Item ukuran kotak
mobil, fr, gr unit), itu akan menyusut untuk membuat ruang untuk item tetangganya yang telah tumbuh dalam ukuran hanya jika kata item tidak berukuran oleh mengubah atau margin negatif.fr) dari wadah kotak. Lihatlah bagaimana ketiga item terlihat setelah yang kiri diubah ukurannya dengan dua cara yang berbeda.1. Berukuran dengan
lebar dan tinggilebar dan tinggi properti. Akibatnya, ia tetap berada di dalam wadah kotak.
.kisi-kiri kisi-area: kiri; lebar: 200px; tinggi: 90px;
2. Berukuran dengan
mengubahmengubah milik. Akibatnya, itu meluap wadah dan celah jaringan juga menghilang.
.kisi-kiri kisi-area: kiri; transform: scalex (1.8);
