Pengantar Modul Tata Letak Kotak CSS

Dulu sekali meja, kemudian margin dan mengapung, kemudian flexbox dan sekarang kisi: CSS selalu mengarah ke cara-cara baru dan lebih baik untuk memudahkan pekerjaan lama coding tata letak web. Itu Model Tata Letak Kotak CSS dapat membuat dan memperbarui tata letak sepanjang dua sumbu: horisontal dan vertikal, mempengaruhi lebar dan tinggi elemen.

Tata letak kotak tidak tergantung pada posisi elemen dalam markup, karenanya, Anda bisa kocok penempatan elemen dalam markup tanpa mengubah tata letak. Dalam model grid, elemen wadah kotak adalah dibagi menjadi kolom dan baris kisi (secara kolektif dikenal sebagai trek kotak) oleh garis kisi. Sekarang mari kita lihat caranya buat kisi sampel.

Dukungan browser

Pada penulisan artikel ini, Modul Kotak CSS hanya didukung oleh browser IE terbaru dan Edge. Kotak CSS adalah dalam tahap eksperimental di browser utama lainnya di mana Anda harus aktifkan dukungan secara manual:

• Firefox: Tekan Shift + F2, masukkan perintah berikut ke dalam bilah masukan GCLI yang muncul di bagian bawah browser: pref.setel layout.css.grid.enabled benar.
• Chrome: Jelajahi chrome: // flags URL dan aktifkan Fitur Platform Web Eksperimental.

Semua dukungan browser utama cenderung datang awal / pertengahan 2017.

Kisi sampel

Untuk mengubah elemen menjadi wadah kotak kamu bisa memakai salah satu dari tiga ini tampilan properti:

1. tampilan: kotak; - elemennya adalah dikonversi ke wadah kotak blok
2. display: inline-grid; - elemennya adalah dikonversi ke wadah kotak sebaris
3. tampilan: subgrid; - jika elemen adalah item grid itu dikonversi menjadi subgrid yang mengabaikan templat kisi dan properti celah jaringan

Sama seperti sebuah tabel terdiri dari beberapa sel tabel, sebuah grid juga terdiri dari beberapa sel kisi. Item kisi adalah ditugaskan ke satu set sel kisi yang secara kolektif dikenal sebagai area grid.

Kami akan membuat kisi dengan lima bagian (area kisi): atas, bawah, kiri, kanan dan tengah. HTML terdiri dari lima div di dalam wadah div.

 
 
Teratas
 
Kiri
 
pusat
 
Kanan
 
Bawah
 
 

Dalam CSS, kotak-templat-bidang milik mendefinisikan kisi dengan area kisi yang berbeda. Dalam nilainya, string mewakili baris kisi dan setiap nama yang valid dalam string mewakili kolom. Untuk buat sel kotak kosong Anda harus menggunakan dot (.) karakter dalam string baris.

Itu nama area kisi harus dirujuk oleh area grid properti dari setiap item kisi.

 .grid-container width: 500px; tinggi: 500px; tampilan: kotak; grid-templat-area: "atas atas atas" "kiri tengah kanan" "bawah bawah bawah";  .grid-top area-grid: atas;  .grid-bottom area-grid: bawah;  .grid-left area-grid: kiri;  .grid-right area-grid: kanan;  .grid-center area-grid: pusat;  

Jadi kode ini dibuat kisi dengan tiga baris dan kolom. Itu teratas item menempati area yang membentang tiga kolom di baris pertama dan bawah membentang item tiga kolom di baris terakhir. Masing-masing kiri, pusat dan kanan barang yang dibutuhkan satu kolom di baris tengah.

Sekarang kita perlu menetapkan dimensi ke baris dan kolom ini. Itu grid-template-kolom dan grid-template-rows properti tentukan ukuran track grid (baris atau kolom).

 .grid-container width: 500px; tinggi: 500px; tampilan: kotak; grid-templat-area: "atas atas atas" "kiri tengah kanan" "bawah bawah"; grid-template-kolom: 100px otomatis 100px; grid-template-rows: 50px otomatis 150px;  

Beginilah tampilan kotak CSS kami sekarang (dengan beberapa gaya tambahan):

Spasi antar item kisi

Anda dapat menambahkan ruang kosong antara kolom dan baris menggunakan grid-kolom-gap dan grid-row-gap, atau properti lama mereka celah jaringan.

 .grid-container width: 500px; tinggi: 500px; tampilan: kotak; grid-templat-area: "atas atas atas" "kiri tengah kanan" "bawah bawah bawah"; grid-template-kolom: 100px otomatis 100px; grid-template-rows: 50px otomatis 150px; grid-gap: 5px 5px;  

Di bawah ini Anda dapat melihat bahwa celah jaringan properti menambahkan celah antara item kisi memang.

Sejajarkan konten dan item kisi

Itu konten-membenarkan milik wadah kotak (.kotak-wadah) menyelaraskan konten kisi sepanjang sumbu sebaris (sumbu horizontal) dan properti menyelaraskan konten, menyelaraskan konten kisi sepanjang sumbu blok (sumbu vertikal). Kedua sifat itu dapat memiliki salah satu dari nilai-nilai ini: mulai, akhir, pusat, ruang-antara, ruang-sekitar dan ruang-merata.

Jika berlaku, ukuran trek (baris atau kolom) menyusut agar sesuai dengan konten saat disejajarkan. Lihatlah tangkapan layar dari isi kisi selaras dengan nilai yang berbeda di bawah.

justify-content: mulai;

justify-content: end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: ruang-merata;

menyelaraskan konten: mulai;

align-content: end;

align-content: center;

align-content: space-between;

align-content: space-around;

menyelaraskan konten: ruang-merata;

Keduanya konten-membenarkan dan menyelaraskan konten properti menyelaraskan seluruh konten dalam kotak.

Untuk menyelaraskan setiap item dalam area kisi mereka, menggunakan sepasang properti pelurusan lainnya: justify-items dan menyelaraskan item. Keduanya dapat memiliki salah satu dari nilai ini: mulai, akhir, pusat, baseline (sejajarkan item di sepanjang garis grid dasar area) dan meregang (item mengisi seluruh area mereka).