Rumah  >  Artikel  >  hujung hadapan web  >  CSS: susun atur batu

CSS: susun atur batu

Barbara Streisand
Barbara Streisandasal
2024-11-07 16:06:03595semak imbas

Apakah susun atur batu?

dari MDN:

Reka letak batu ialah kaedah reka letak di mana satu paksi menggunakan reka letak grid yang ketat, selalunya lajur dan satu lagi reka letak batu. Pada paksi batu, daripada berpegang pada grid yang ketat dengan jurang yang ditinggalkan selepas item yang lebih pendek, item dalam baris berikut naik untuk mengisi jurang sepenuhnya.

reka letak Pinterest.com ialah satu contoh klasiknya:

CSS: masonry layout

Apakah yang boleh kami gunakan daripada kotak alat CSS kami?

grid

Kami menggunakan penanda HTML mudah:

<div>



<p>My first shot was grid & grid-template-column<br>
</p>

<pre class="brush:php;toolbar:false">.photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;

  img{
    width: 100%;
  }
}

CSS: masonry layout

Responsifnya bagus, tetapi kami mempunyai jurang di bawah setiap imej.

kiraan lajur

seterusnya, gunakan sifat kontena CSS kiraan lajur.

Sifat CSS kiraan lajur memecahkan kandungan elemen ke dalam bilangan lajur yang ditentukan.

.photos {
  column-count: 4;

  img{
    width: 100%;
    margin-bottom: 1rem;
  }
}

CSS: masonry layout

Tidak bagus.
Reka letak semasa kelihatan seperti yang dikehendaki, tetapi imej berskala dan tidak responsif. Walaupun kami boleh menggunakan pertanyaan media untuk mengawal responsif, kami menyasarkan penyelesaian yang lebih mantap.

Menggunakan lajur

Sifat trengkas CSS lajur menetapkan bilangan lajur untuk digunakan semasa melukis kandungan elemen, serta lebar lajur tersebut.

.photos {
  columns: 250px;

  img{
    width: 100%;
    margin-bottom: 1rem;
  }
}

CSS: masonry layout

Satu baris kod. Hebat!

Bagaimana ini berfungsi?

Setiap lajur diberi lebar minimum 250px. Jika terdapat ruang tambahan melebihi 250px, lajur akan berkembang untuk memenuhi ruang. Jika ruang dikurangkan, bilangan lajur akan berkurangan dengan sewajarnya.

Tambahan

Kami boleh mengehadkan bilangan lajur dengan menetapkan reka letak kepada maksimum lajur X:

.photos {
  columns: 250px 2;
  ...
  ...
}

CSS: masonry layout

Menggunakan

lajur
tidak terhad kepada susun atur imej batu sahaja. Kami juga boleh menggunakannya untuk menggayakan lajur teks: CSS yang sama, kandungan yang berbeza.

CSS: masonry layout

Fikiran akhir

Adakah ini membantu?
Apakah bekas penggunaan anda?

Atas ialah kandungan terperinci CSS: susun atur batu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn