Menggunakan CSS moden untuk membina grid imej responsif

Artikel ini meneroka teknik untuk menguasai jarak antara lajur dalam susun atur grid responsif, menggunakan galeri imej responsif sebagai contoh praktikal.

Untuk pandangan lanjut mengenai susun atur responsif, lihat screencast kami: Membuat susun atur lajur berganda di Flexbox.

Takeaways utama:

• susun atur responsif tersuai boleh dicapai dengan tepat mengawal jarak antara lajur, seperti yang ditunjukkan dengan galeri imej responsif.
• kaedah display: inline-block mencipta galeri imej responsif; Menetapkan saiz fon ibu bapa ke sifar menghilangkan jarak blok lalai.
• Flexbox dengan cekap menyelesaikan masalah susun atur yang sama, mewujudkan lajur ketinggian yang sama di semua saiz skrin, memudahkan kawalan jarak antara lajur dalam grid imej responsif.
• pertanyaan media dan susun atur grid CSS membolehkan grid imej responsif, menggunakan peraturan CSS yang berbeza berdasarkan ciri -ciri peranti (saiz skrin).

Membina susun atur responsif:

di skrin yang lebih besar, galeri menyerupai ini:

pada skrin yang lebih kecil:

markup mudah:

Beberapa kaedah susun atur mencapai ini. Sebelum meneroka dua, mari kita mengulangi keperluan:

<div>
  <a href="https://www.php.cn/link/14d2bc475177e1dde633b4ca1972d53c">
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Using Modern CSS to Build a Responsive Image Grid " />
  </a>
  <!-- ...more images... -->
</div>

susun atur dua lajur pada skrin sederhana dan lebih kecil.

8px jarak antara lajur.
Menggunakan

:

inline-block Kaedah membina galeri. Pertimbangkan CSS ini:

display: inline-block Penjelasan:

div {
  font-size: 0;
}

a {
  font-size: 16px;
  display: inline-block;
  margin-bottom: 8px;
  width: calc(50% - 4px);
  margin-right: 8px;
}

a:nth-of-type(2n) {
  margin-right: 0;
}

@media screen and (min-width: 50em) {
  a {
    width: calc(25% - 6px);
  }

  a:nth-of-type(2n) {
    margin-right: 8px;
  }

  a:nth-of-type(4n) {
    margin-right: 0;
  }
}

Jarak blok lalai default ditindih dengan menetapkan saiz fon ibu bapa kepada sifar. Saiz fon elemen kanak -kanak mungkin perlu menetapkan semula (tidak di sini).

Skrin kecil mempunyai susun atur dua lajur dengan jarak 8px. Pengiraan lebar lajur:

Jumlah ruang antara lajur setiap baris: 1 * 8px = 8px (8px, bukan 16px, kerana margin yang betul dikeluarkan dari setiap lajur kedua).

Lebar lajur:

(4px = 8px / 2).
• calc(50% - 4px)
Skrin besar mempunyai susun atur empat lajur dengan jarak 8px. Pengiraan lebar lajur:

Jumlah ruang antara lajur setiap baris: 3 * 8px = 24px (24px, bukan 32px, kerana margin yang betul dikeluarkan dari setiap lajur keempat).

Lebar lajur:

(6px = 24px / 4).

• lihat demo codepen untuk kaedah calc(25% - 6px).

Menggunakan Flexbox:

Penyelesaian inline-block mempunyai kelemahan. Menambah kapsyen menunjukkan satu:

MARKUP Dikemaskini:

<div>
  <a href="https://www.php.cn/link/14d2bc475177e1dde633b4ca1972d53c">
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Using Modern CSS to Build a Responsive Image Grid " />
  </a>
  <!-- ...more images... -->
</div>

galeri skrin besar dengan kapsyen:



Ketinggian yang tidak sama rata diselesaikan dengan Flexbox. Kemas kini CSS elemen induk:

div {
  font-size: 0;
}

a {
  font-size: 16px;
  display: inline-block;
  margin-bottom: 8px;
  width: calc(50% - 4px);
  margin-right: 8px;
}

a:nth-of-type(2n) {
  margin-right: 0;
}

@media screen and (min-width: 50em) {
  a {
    width: calc(25% - 6px);
  }

  a:nth-of-type(2n) {
    margin-right: 8px;
  }

  a:nth-of-type(4n) {
    margin-right: 0;
  }
}

Hasilnya adalah lajur ketinggian yang sama di semua skrin. Contoh Skrin Besar:

lihat demo codepen menggunakan flexbox dengan kapsyen yang lebih baik.

Flexbox's

harta tidak langsung membuat susun atur ini.

dan justify-content mengakibatkan pengedaran canggung pada baris terakhir. CSS: space-between space-around

tidak

<div>
  <a href="https://www.php.cn/link/14d2bc475177e1dde633b4ca1972d53c">
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Using Modern CSS to Build a Responsive Image Grid " />
    <figcaption>Some text here</figcaption>
  </a>
  <!-- ...more images... -->
</div>

diperlukan;

mengendalikan pengedaran item. margin-right justify-content lihat demo codepen menggunakan harta

.

justify-content

Kesimpulan:

Teknik butiran pos ini untuk mengawal jarak antara lajur dalam grid imej responsif. Walaupun

cukup, Flexbox lebih mudah dan lebih mudah, terutamanya dengan

. inline-block calc()

Ketahui lebih lanjut mengenai susun atur flexbox dalam screencast kami: Membuat susun atur lajur berganda di Flexbox.
(bahagian Soalan Lazim yang ditinggalkan untuk keringkasan, kerana ia adalah pengulangan soalan reka bentuk responsif yang sama.)

Atas ialah kandungan terperinci Menggunakan CSS moden untuk membina grid imej responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!