Grid logo di dataran

Membuat Layout Grid Logo Majalah: Penjelasan terperinci mengenai petua grid CSS

Artikel ini akan membimbing anda bagaimana untuk membuat susun atur grid logo majalah yang fleksibel dan responsif menggunakan grid CSS. Susun atur ini sering digunakan untuk memaparkan penderma, penaja, atau pengguna produk. Menggunakan dataran secara berkesan dapat mengendalikan logo saiz, perkadaran dan berat visual yang berbeza untuk mengelakkan kekeliruan susun atur.

1. Struktur grid

Gunakan Emmet untuk membuat struktur HTML dengan cepat:

 <code>.grid>div*5>img</code>

Tekan kekunci Tab dan luangkannya sebagai:

<div class="grid">
  <div><img alt="" src=""></div>
  <div><img alt="" src=""></div>
  <div><img alt="" src=""></div>
  <div><img alt="" src=""></div>
  <div><img alt="" src=""></div>
</div>

2. Asas grid CSS

Mengadopsi Teknologi Lajur Fleksibel:

 .Grid {
  paparan: grid;
  Grid-template-lajur: Ulang (Auto-Fill, Minmax (200px, 1FR));
  Grid-Gap: 1rem;
}

Ini bukan sahaja mewujudkan lajur yang fleksibel, tetapi juga membolehkan bilangan lajur diselaraskan secara automatik mengikut saiz skrin.

3. Buat persegi

Tidak perlu memaksa ketinggian untuk ditetapkan, gunakan elemen pseudo dan tips padding-bottom :

 .grid> div {
  Latar Belakang: Hitam;
  Padding: 1rem;
}

.grid> div :: sebelum {
  Kandungan: "";
  Padding-Bottom: 100%;
  paparan: blok;
}

Ini akan mengekalkan ketinggian setiap item grid yang selaras dengan lebarnya, membentuk persegi yang sempurna.

4. Gambar overlay dan pusat

Untuk melapisi imej dengan elemen pseudo, gunakan grid lagi:

 .grid> div {
  / * ... */
  paparan: grid;
}
.Grid> Div :: Sebelum,
.grid> div> img {
  grid-kawasan: 1/1/2/2;
}

Ini akan menjadikan kedua-dua elemen pseudo dan gambar yang terletak di sel pertama item grid, melaksanakan overlay.

Untuk memusatkan imej, tetapkan width: 100%; height: 100%; dan gunakan object-fit: contain;

 .grid> div> img {
  Lebar: 100%;
  Ketinggian: 100%;
  Objek-Fit: Mengandungi;
}

5. Anomali pelarasan saiz seret dan drop

Harus diingat bahawa apabila menyeret gambar, gambar mungkin berubah.

6. Gunakan alternatif kedudukan mutlak

Sekiranya pengecualian seret adalah masalah, kedudukan mutlak boleh digunakan:

Kaedah 1:

 .grid> div> img {
  Kedudukan: Mutlak;
  Max-Width: 100%;
  Atas: 0;
  Bawah: 0;
  Kanan: 0;
  Kiri: 0;
  Margin: Auto;
}

Kaedah 2:

 .grid> div> img {
  Kedudukan: Mutlak;
  Max-Width: 100%;
  Atas: 50%;
  Kiri: 50%;
  Transform: Terjemahan (-50%, -50%);
}

Kedua -dua kaedah dapat menyelesaikan masalah pengecualian seret dan drop.

Tutorial video

(Pautan video harus dimasukkan di sini, tidak disediakan dalam teks asal)

Dengan langkah -langkah di atas, anda boleh membuat susun atur grid logo majalah yang fleksibel dan responsif. Pilih kaedah berpusat gambar yang sesuai dengan keperluan anda untuk memastikan pengalaman pengguna terbaik.

Atas ialah kandungan terperinci Grid logo di dataran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!