CSS: susun atur batu

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:

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%;
  }
}

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;
  }
}

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;
  }
}

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;
  ...
  ...
}

Menggunakan

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

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!