Pengenalan kepada Modul Layout Grid CSS

Ia sekali sahaja jadual, kemudian margin dan terapung, kemudian flexbox dan sekarang grid: CSS sentiasa menuju ke arah yang baru dan lebih baik untuk meringankan kerja lama kod web pengekodan. The Model Layout Grid CSS boleh membuat dan mengemas kini tata letak bersama dua paksi: mendatar dan menegak, menjejaskan lebar dan ketinggian unsur-unsur.

Susun atur grid tidak bergantung pada kedudukan unsur dalam markup, oleh itu, anda boleh shuffle penempatan elemen dalam markup tanpa mengubah susun atur. Dalam model grid, elemen kontena grid adalah dibahagikan kepada lajur grid dan baris (secara kolektif dikenali sebagai jejak grid) oleh garis grid. Sekarang mari kita lihat cara buat grid sampel.

Sokongan penyemak imbas

Sebagai penulisan artikel ini, Modul Grid CSS hanya disokong oleh penyemak imbas IE terkini dan Edge. Grid CSS adalah dalam peringkat eksperimen dalam pelayar utama lain di mana anda perlu membolehkan sokongan secara manual:

• Firefox: Tekan Shift + F2, masukkan arahan berikut ke dalam bar input GCLI yang muncul di bahagian bawah penyemak imbas: pref set layout.css.grid.enabled benar.
• Chrome: Semak imbas chrome: // flags URL dan aktifkan Ciri-ciri Platform Web Eksperimental.

Semua sokongan pelayar utama mungkin datang pada awal / pertengahan tahun 2017.

Grid sampel

Untuk giliran elemen ke dalam bekas grid anda boleh gunakan salah satu daripada ketiga-tiga ini paparan hartanah:

1. paparan: grid; - elemen itu ditukar ke bekas grid blok
2. paparan: inline-grid; - elemen itu ditukar ke bekas grid inline
3. paparan: subgrid; - jika elemen adalah item grid ia adalah ditukar menjadi subgrid yang mengabaikan templat grid dan sifat jurang grid

Sama seperti jadual terdiri daripada pelbagai sel jadual, grid adalah terdiri daripada pelbagai sel grid. Item grid adalah ditugaskan untuk satu set sel grid yang secara kolektif dikenali sebagai kawasan grid.

Kami akan buat satu grid dengan lima bahagian (kawasan grid): atas, bawah, kiri, kanan dan tengah. HTML terdiri daripada lima div di dalam bekas kontena.

 
 
Teratas
 
Ditinggalkan
 
pusat
 
Betul
 
Bawah
 
 

Dalam CSS, yang grid-template-areas harta mentakrifkan grid dengan kawasan grid berbeza. Dalam nilainya, rentetan mewakili baris grid dan setiap nama yang sah dalam rentetan mewakili lajur. Untuk buat sel grid kosong anda perlu menggunakannya titik (.) watak dalam rentetan berturut-turut.

The nama kawasan grid hendaklah dirujuk oleh grid-area harta benda grid individu.

 .kotak-bekas lebar: 500px; ketinggian: 500px; paparan: grid; grid-template-areas: "top top top" "left center right" "bottom bottom bottom";  .grid-top grid-area: top;  .grid-bottom grid-area: bottom;  .grid-left grid-area: left;  .grid-kanan grid-area: right;  .grid-center grid-area: center;  

Jadi kod ini mencipta satu grid dengan tiga baris dan lajur. The atas item menempati kawasan yang berleluasa tiga lajur dalam baris pertama dan juga bawah item menjangkau tiga lajur pada baris terakhir. Setiap satu ditinggalkan, pusat dan betul barang mengambil satu lajur di baris tengah.

Sekarang kita perlu tetapkan dimensi ke baris dan lajur ini. The grid-template-columns dan grid-template-baris hartanah tentukan saiz trek grid (baris atau lajur).

 .kotak-bekas lebar: 500px; ketinggian: 500px; paparan: grid; grid-template-areas: "top top top" "left center right" "bottom bottom bottom"; grid-template-columns: 100px auto 100px; grid-template-row: 50px auto 150px;  

Inilah cara grid CSS kami kelihatan sekarang (dengan beberapa gaya tambahan):

Ruang antara item grid

Anda boleh menambah ruang kosong antara lajur dan baris menggunakan grid-column-jurang dan grid-row-jurang, atau harta karun mereka grid-jurang.

 .kotak-bekas lebar: 500px; ketinggian: 500px; paparan: grid; grid-template-areas: "top top top" "left center right" "bottom bottom bottom"; grid-template-columns: 100px auto 100px; grid-template-row: 50px auto 150px; grid-jurang: 5px 5px;  

Di bawah ini anda dapat melihat bahawa grid-jurang harta menambah jurang antara item grid sememangnya.

Sejajarkan kandungan dan item grid

The justify-content harta bekas grid (.kotak bekas) menyelaraskan kandungan grid sepanjang paksi sebaris (paksi mendatar) dan harta itu align-content, menjajarkan kandungan grid sepanjang paksi blok (paksi menegak). Kedua-dua hartanah boleh mempunyai salah satu nilai ini: mulakan, akhir, pusat, ruang antara, ruang sekitar dan ruang-rata.

Jika berkenaan, saiz trek (baris atau lajur) menyusut untuk muat kandungan apabila diselaraskan. Lihatlah tangkapan skrin kandungan grid sejajar dengan nilai yang berbeza di bawah.

justify-content: start;

justify-content: end;

justify-content: center;

justify-content: ruang antara;

justify-content: space-around;

justify-content: ruang-rata;

align-content: start;

align-content: end;

align-content: center;

jajaran-kandungan: ruang antara;

align-content: ruang-sekitar;

align-content: ruang-sama;

Kedua justify-content dan align-content hartanah menyelaraskan keseluruhan kandungan dalam grid.

Untuk menyelaraskan item individu dalam kawasan grid mereka, menggunakan pasangan lain penjajaran hartanah: justify-items dan menyelaraskan item. Kedua-duanya boleh mempunyai satu daripada nilai ini: mulakan, akhir, pusat, baseline (menyelaraskan item di sepanjang garis grid asas kawasan) dan regangan (item mengisi keseluruhan kawasan).