Adakah Grid CSS Penyelesaian Terbaik untuk Reka Letak Kompleks?

Reka Letak Grid: Penyelesaian Moden untuk Reka Letak Kompleks

Pencarian anda untuk penyelesaian yang merangkumi kedua-dua baris dan lajur dalam bukan jadual, reka letak bukan grid telah didokumenkan dengan baik dalam urutan sebelumnya. Walau bagaimanapun, keadaan telah berkembang dengan kemas kini penyemak imbas terkini.

Grid CSS: Penukar Permainan

Reka Letak Grid CSS kini disokong sepenuhnya oleh semua pelayar utama, menawarkan penyelesaian yang teguh dan fleksibel untuk susun atur yang kompleks. Ia menghapuskan keperluan untuk mengubah HTML, menambah bekas bersarang atau menetapkan ketinggian bekas tetap.

Melaksanakan Reka Letak Grid

1. Tetapkan sifat paparan elemen pembalut ke grid untuk mendayakan reka letak grid.
2. Tentukan lajur dan baris grid menggunakan lajur-templat-grid dan baris-auto-grid.
3. Tetapkan sifat jurang grid untuk menentukan jarak antara elemen.
4. Gunakan sifat baris grid dan lajur grid pada elemen untuk mengawal kedudukannya dalam grid.

Contoh dengan Reka Letak Grid

Pertimbangkan coretan kod berikut yang menggabungkan Grid CSS:

#wrapper {
  display: grid;                            
  grid-template-columns: repeat(5, 90px);   
  grid-auto-rows: 50px;                     
  grid-gap: 10px;                           
  width: 516px;
}

.tall {
  grid-row: 1 / 3;                          
  grid-column: 2 / 3;                       
}

.wide {
  grid-row: 2 / 4;                          
  grid-column: 3 / 5;                       
}

.block {
  background-color: red;
}

Sokongan Penyemak Imbas Yang Dipertingkat

Setakat hari ini, Grid CSS disokong sepenuhnya oleh:

• Chrome 57
• Firefox 52
• Safari 10
• Edge 15
• Opera 44

Ini>

Atas ialah kandungan terperinci Adakah Grid CSS Penyelesaian Terbaik untuk Reka Letak Kompleks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!