Pemahaman yang mendalam tentang grid-jurang dalam grid CSS: Mengapa ia tidak bertindak pada jarak grid?

Artikel ini bertujuan untuk menghuraikan penggunaan atribut grid-jurang yang betul dalam susun atur grid CSS, menjelaskan bahawa skop mereka terhad kepada jarak antara sel di dalam grid, dan bukannya antara bekas grid yang berbeza. Kami akan menggunakan contoh-contoh tertentu untuk menunjukkan cara membina bekas grid induk dengan pelbagai item grid dan betul memohon atribut jurang (atau grid-jurang) pada bekas ini, dengan itu mencapai kesan jarak grid yang dijangkakan dan mengoptimumkan pembacaan dan penyelenggaraan susun atur.

Memahami skop grid-jurang

Dalam susun atur grid CSS, grid-jurang (atau jurang bentuk singkatannya) adalah harta yang sangat praktikal untuk mewujudkan jarak antara baris grid dan lajur. Walau bagaimanapun, ramai pemaju boleh salah faham skop tindakan mereka apabila mereka mula -mula bersentuhan. Konsep teras adalah bahawa grid-jurang hanya berkuatkuasa di dalam bekas grid yang diisytiharkan, dan ia mentakrifkan jarak antara item grid yang terkandung dalam bekas grid , dan bukannya antara bekas grid bebas.

Pertimbangkan senario berikut: Jika terdapat banyak elemen div bebas di halaman, setiap div ditetapkan untuk dipaparkan: grid;, menggunakan grid-jurang ke Div ini hanya akan menjejaskan susun atur dalaman masing-masing tanpa jarak antara div. Dalam erti kata lain, setiap div.Autota sendiri adalah grid bebas, dan grid-jurang bertindak antara unsur-unsur kanak-kanak di dalam div.autota (seperti tag IMG dan B). Inilah sebabnya dalam kod asal, walaupun grid-jurang: 10px; ditetapkan, tidak ada jarak mendatar atau menegak antara pelbagai elemen.

Melaksanakan jarak grid dengan betul

Untuk mencapai jarak antara pelbagai blok bebas (seperti beberapa kad produk) dan memanfaatkan keupayaan susun atur yang kuat dari grid CSS, pendekatan yang betul adalah untuk memperkenalkan bekas grid induk . Bekas induk ini akan menjadi tuan rumah semua elemen kanak -kanak yang perlu diatur dan jarak (iaitu elemen .utota anda), dan ia mentakrifkan susun atur dan jarak grid keseluruhan.

Berikut adalah langkah dan kod sampel untuk mencapai ini:

1. Buat bekas grid induk: Dalam struktur HTML, bungkus semua unsur-unsur.
2. Sapukan susun atur grid ke bekas induk: Sapukan paparan: grid; dan sifat jurang ke-kontainer ini.
3. Tentukan lajur dan baris grid induk: Gunakan grid-template-lajur dan grid template-baris (jika diperlukan) untuk menentukan struktur grid induk. Sebagai contoh, ulangi (Auto-Fit, Minmax (320px, 1FR)) boleh digunakan untuk melaksanakan susun atur lajur responsif, memastikan bahawa setiap elemen .utota adalah sekurang-kurangnya 320px lebar, dan secara automatik menyesuaikan bilangan lajur mengikut ruang yang ada.
4. Laraskan gaya elemen kanak -kanak: Keluarkan atribut CSS pada unsur -unsur. Jika susun atur grid juga diperlukan untuk .utota, paparannya: grid; dan sifat jurang dalamannya dapat dikekalkan.

Contoh kod dan analisis

Katakan kami ingin mengatur pelbagai. Kad autota ke dalam pelbagai lajur dan tambah jarak di antara mereka.

Pelarasan Struktur HTML:

 <div class="grid-container">
  <div class="autota">
    <img  src="https://live.staticflickr.com/622/20721274966_b37363d59c_b.jpg" alt="Pemahaman yang mendalam tentang grid-jurang dalam grid CSS: Mengapa ia tidak bertindak pada jarak grid?" >
    <b> 2014 Ford Focus 1.0 Titanium 5dr </b> Silver <b> £ 6999 </b>
  </div>
  <div class="autota">
    <img  src="https://live.staticflickr.com/3088/3127519858_8b75af8af5_z.jpg" alt="Pemahaman yang mendalam tentang grid-jurang dalam grid CSS: Mengapa ia tidak bertindak pada jarak grid?" >
    <b> 1999 Nissan Maxima 3.0 V6 GXE 4DR </b> biru <b> £ 500 </b>
  </div>
  <div class="autota">
    <img  src="https://live.staticflickr.com/1276/919479405_86966cd5ec_o.jpg" alt="Pemahaman yang mendalam tentang grid-jurang dalam grid CSS: Mengapa ia tidak bertindak pada jarak grid?" >
    <b> 1983 Chrysler E-Class 2.2 4dr </b> White, Classic Car <b> £ 3290 </b>
  </div>
  <div class="autota">
    <img  src="https://live.staticflickr.com/622/20721274966_b37363d59c_b.jpg" alt="Pemahaman yang mendalam tentang grid-jurang dalam grid CSS: Mengapa ia tidak bertindak pada jarak grid?" >
    <b> 2014 Ford Focus 1.0 Titanium 5dr </b> Silver <b> £ 6999 </b>
  </div>
  <div class="autota">
    <img  src="https://live.staticflickr.com/3088/3127519858_8b75af8af5_z.jpg" alt="Pemahaman yang mendalam tentang grid-jurang dalam grid CSS: Mengapa ia tidak bertindak pada jarak grid?" >
    <b> 1999 Nissan Maxima 3.0 V6 GXE 4DR </b> biru <b> £ 500 </b>
  </div>
  <div class="autota">
    <img  src="https://live.staticflickr.com/1276/919479405_86966cd5ec_o.jpg" alt="Pemahaman yang mendalam tentang grid-jurang dalam grid CSS: Mengapa ia tidak bertindak pada jarak grid?" >
    <b> 1983 Chrysler E-Class 2.2 4dr </b> White, Classic Car <b> £ 3290 </b>
  </div>
</div>

Pelarasan Gaya CSS:

 badan {
  Font-Family: Helvetica, Arial, Sans-Serif;
  saiz font: 14px;
}

/* Tentukan bekas grid induk*/
.Grid-Container {
  paparan: grid;
  / * Secara automatik mengisi lajur, setiap lajur mempunyai minimum 320px, maksimum 1fr (menduduki ruang yang tinggal) */
  Grid-template-lajur: ulangi (auto-fit, Minmax (320px, 1FR));
  /* Tetapkan jarak antara baris dan lajur*/
  Gap: 20px; / * Adalah disyorkan untuk menggunakan harta jurang yang lebih umum, yang menetapkan grid-baris-jurang dan grid-column-jurang */
  Padding: 20px; /* Margin kontena untuk mengelakkan kandungan dekat dengan tepi*/
}

/* Tentukan susun atur di dalam .Autota*/
div.autota {
  paparan: grid; /* .Autota sendiri masih boleh menjadi bekas grid*/
  Grid-template-baris: Auto 1FR; /* Imej menduduki ketinggian automatik, dan teks menduduki ruang yang tinggal*/
  Gap: 10px; /* .Autota jarak antara gambar dalaman dan teks*/
  Sempadan: 2px pepejal;
  /* Keluarkan terapung luaran dan lebar tetap, biarkan grid induk mengawal saiz dan susunannya*/
  /* lebar: 320px; / * Keluarkan */
  /* terapung: kiri; / * Keluarkan */
  /* margin-bottom: 15px; /* Jika diperlukan, jarak luaran menegak dapat dikekalkan, tetapi disyorkan bahawa jurang grid induk diuruskan seragam*/
}

div.autota img {
  Lebar: 100%; /* Pastikan imej menyesuaikan diri dengan lebar di dalam.
  ketinggian: auto;
  paparan: blok; /* Keluarkan jurang lalai di bahagian bawah gambar*/
}

/* Terapung jelas tidak lagi diperlukan kerana ia telah beralih ke susun atur grid*/
/* .clear {clear: kedua -duanya; } */

Analisis:

• Kontainer grid kini menjadi grid utama, yang bertanggungjawab untuk susun atur keseluruhan semua elemen.
• Grid-template-lajur: ulangi (auto-fit, Minmax (320px, 1FR)); membolehkan unsur -unsur.
• Gap: 20px; Digunakan pada grid-kontainer, mewujudkan jarak mendatar dan menegak 20px antara setiap elemen .utota.
• Paparan: grid di dalam div.autota masih boleh mengekalkan paparan: grid;, yang digunakan untuk menguruskan susun atur antara gambar dan teks, dan jurang dalamannya: 10px; mengawal jarak antara gambar dan teks. Ini menunjukkan keupayaan bersarang susun atur grid.

Nota dan ringkasan

1. Hierarki dan Skop: Sentiasa ingat bahawa jurang (atau grid-jurang) bertindak di dalam bekas grid yang diisytiharkan, digunakan untuk memisahkan item grid langsungnya.
2. GAP VS GRID-GAP: GAP adalah singkatan dari grid-row-jurang dan grid-column-jurang, dan dalam CSS moden, atribut jurang tidak hanya sesuai untuk susun atur grid, tetapi juga untuk susun atur flexbox, jadi disyorkan untuk menggunakan jurang terlebih dahulu.
3. Strategi Layout: Apabila merancang susun atur kompleks, memecahkan halaman ke kawasan mesh yang berbeza dan menentukan mesh induknya untuk setiap kawasan adalah kunci untuk mencapai kod CSS yang jelas dan dikekalkan.
4. Elakkan susun atur pencampuran: Cuba untuk mengelakkan pencampuran susun atur terapung dan grid pada set elemen yang sama, kerana mereka adalah paradigma susun atur yang berbeza yang boleh menyebabkan tingkah laku yang tidak dapat diramalkan. Sebaik sahaja anda beralih ke grid, anda harus memanfaatkan sepenuhnya ciri -cirinya.

Dengan memahami skop sifat jurang dan membina struktur grid bersarang dengan betul, pemaju dapat lebih memanfaatkan kuasa grid CSS untuk membuat susun atur halaman kompleks yang responsif dan mudah dikendalikan.

Atas ialah kandungan terperinci Pemahaman yang mendalam tentang grid-jurang dalam grid CSS: Mengapa ia tidak bertindak pada jarak grid?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!