Pembungkusan kisi CSS

126

Apakah mungkin membuat bungkus kisi CSS tanpa menggunakan kueri media?

Dalam kasus saya, saya memiliki jumlah item non-deterministik yang ingin saya tempatkan dalam kotak dan saya ingin kotak itu membungkusnya. Dengan menggunakan Flexbox, saya tidak dapat mengatur ruang dengan baik. Saya juga ingin menghindari banyak pertanyaan media.

Berikut beberapa contoh kode :

.grid {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-template-columns: 186px 186px 186px 186px;
}

.grid > * {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Luaskan cuplikan

Dan inilah gambar GIF:

Sebagai catatan tambahan, jika ada yang bisa memberi tahu saya bagaimana saya bisa menghindari menentukan lebar semua item seperti saya, grid-template-columnsitu akan bagus. Saya lebih suka anak-anak menentukan lebarnya sendiri.

html css css-grid kentcdodds
sumber

2

grid-template-columns: auto auto auto auto;apakah bekerja dalam kasus ini? =)

Jakub Chlebowicz

219

Gunakan salah satu auto-fillatau auto-fitsebagai nomor pengulangan repeat()notasi.

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

`auto-fill`

Jika auto-filldiberikan sebagai nomor pengulangan, jika wadah kisi memiliki ukuran tertentu atau ukuran maksimal dalam sumbu yang relevan, maka jumlah pengulangan adalah bilangan bulat positif terbesar yang tidak menyebabkan kisi meluap wadah kisi.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Luaskan cuplikan

Kisi akan mengulangi trek sebanyak mungkin tanpa memenuhi wadahnya.

Dalam kasus ini, dengan contoh di atas (lihat gambar) , hanya 5 track yang dapat masuk ke grid-container tanpa meluap. Hanya ada 4 item di kisi kami, jadi yang kelima dibuat sebagai trek kosong di ruang yang tersisa.

Sisa ruang yang tersisa, trek # 6, mengakhiri kisi eksplisit. Ini berarti tidak ada cukup ruang untuk menempatkan trek lain.

`auto-fit`

Kata auto-fitkunci berperilaku sama seperti auto-fill, kecuali setelah algoritme penempatan item kisi, trek kosong dalam ruang yang tersisa akan diciutkan 0.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Luaskan cuplikan

Petak akan tetap mengulangi trek sebanyak mungkin tanpa meluap penampungnya, tetapi trek yang kosong akan diciutkan 0.

Track yang diciutkan dianggap memiliki fungsi ukuran track tetap 0px.

Tidak seperti auto-fillcontoh gambar, trek kelima yang kosong diciutkan, mengakhiri kisi eksplisit tepat setelah item ke-4.

`auto-fill` vs. `auto-fit`

Perbedaan antara keduanya terlihat ketika minmax()fungsinya digunakan.

Gunakan minmax(186px, 1fr)untuk menyusun item dari 186pxhingga 186pxditambah sebagian kecil dari ruang yang tersisa di wadah kisi.

Saat menggunakan auto-fill, item akan bertambah setelah tidak ada ruang untuk menempatkan track kosong.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Luaskan cuplikan

Saat menggunakan auto-fit, item akan bertambah untuk mengisi ruang yang tersisa karena semua trek kosong akan ditutup 0px.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Luaskan cuplikan

Tempat bermain:

CodePen

Memeriksa trek pengisian otomatis

Memeriksa trek pas otomatis

Ricky
sumber

3

Apakah ada cara untuk membuatnya memusatkan yang ada di baris berikutnya?

kentcdodds

Sama seperti yang Anda lakukan dengan kotak fleksibel, pada penggunaan display: gridelemenjustify-content: center

Spittal

Dear @Ricky Cara membuatnya jadi yang pertama jadi milik minmax, misal. repeat(auto-fill, minmax(186px, 1fr));bukan piksel, tetapi selama div memiliki teks di dalamnya?

mesqueeb

1

@mesqueeb Tidak mungkin, diperlukan ukuran yang pasti . Anda dapat melihat jawaban ini untuk lebih jelasnya.

Ricky

1

Adakah cara untuk membuatnya sehingga ketika harus ke baris berikutnya, dua item turun, bukan hanya satu? Jadi suka dari 4 ke 2 ke 1 dan tidak punya 4 ke 3 ke 2 ke 1?

sammiepls

16

Anda ingin salah satu auto-fitatau auto-filldi dalam repeat()fungsi:

grid-template-columns: repeat(auto-fit, 186px);

Perbedaan antara keduanya menjadi jelas jika Anda juga menggunakan a minmax()untuk memungkinkan ukuran kolom yang fleksibel:

grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));

Ini memungkinkan kolom Anda melenturkan ukurannya, mulai dari 186 piksel hingga kolom dengan lebar yang sama yang membentang di seluruh lebar wadah. auto-fillakan membuat kolom sebanyak yang sesuai dengan lebarnya. Jika, katakanlah, lima kolom pas, meskipun Anda hanya memiliki empat item kisi, akan ada kolom kosong kelima:

auto-fitSebaliknya, menggunakan akan mencegah kolom kosong, meregangkan kolom Anda lebih jauh jika perlu:

keithjgrant.dll
sumber

7

Anda mungkin mencari auto-fill:

grid-template-columns: repeat(auto-fill, 186px);

Demo: http://codepen.io/alanbuchanan/pen/wJRMox

Untuk menggunakan ruang yang tersedia secara lebih efisien, Anda dapat menggunakan minmax, dan meneruskan autosebagai argumen kedua:

grid-template-columns: repeat(auto-fill, minmax(186px, auto));

Demo: http://codepen.io/alanbuchanan/pen/jBXWLR

Jika Anda tidak ingin kolom kosong, Anda bisa menggunakan auto-fitbukan auto-fill.

alanbuchanan.dll
sumber

2

Apakah ada cara untuk membuatnya memusatkan yang ada di baris berikutnya?

kentcdodds

3

Saya memiliki situasi yang sama. Di atas apa yang Anda lakukan, saya ingin memusatkan kolom saya di wadah sementara tidak mengizinkan kolom kosong untuk mereka kiri atau kanan:

.grid { 
    display: grid;
    grid-gap: 10px;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
}

farrellw
sumber

Re "sementara tidak mengizinkan kolom kosong untuk mereka" : Apakah maksud Anda "sementara tidak mengizinkan kolom kosong juga untuk mereka" ( ke → juga → baik )? Atau "sementara tidak mengizinkan kolom kosong untuk mereka" (tanpa ke )? Atau sesuatu yang lain (sepertinya tidak menghitung)?

Peter Mortensen

1

Ini usahaku. Maafkan bulu halusnya, saya merasa ekstra kreatif.

Metode saya adalah orang tua divdengan dimensi tetap . Selebihnya hanya menyesuaikan konten di dalam div itu.

Ini akan mengubah skala gambar terlepas dari rasio aspeknya. Tidak akan ada pemotongan yang sulit juga.

body {
    background: #131418;
    text-align: center;
    margin: 0 auto;
}

.my-image-parent {
    display: inline-block;
    width: 300px;
    height: 300px;
    line-height: 300px; /* Should match your div height */
    text-align: center;
    font-size: 0;
}

/* Start demonstration background fluff */
    .bg1 {background: url(https://unsplash.it/801/799);}
    .bg2 {background: url(https://unsplash.it/799/800);}
    .bg3 {background: url(https://unsplash.it/800/799);}
    .bg4 {background: url(https://unsplash.it/801/801);}
    .bg5 {background: url(https://unsplash.it/802/800);}
    .bg6 {background: url(https://unsplash.it/800/802);}
    .bg7 {background: url(https://unsplash.it/802/802);}
    .bg8 {background: url(https://unsplash.it/803/800);}
    .bg9 {background: url(https://unsplash.it/800/803);}
    .bg10 {background: url(https://unsplash.it/803/803);}
    .bg11 {background: url(https://unsplash.it/803/799);}
    .bg12 {background: url(https://unsplash.it/799/803);}
    .bg13 {background: url(https://unsplash.it/806/799);}
    .bg14 {background: url(https://unsplash.it/805/799);}
    .bg15 {background: url(https://unsplash.it/798/804);}
    .bg16 {background: url(https://unsplash.it/804/799);}
    .bg17 {background: url(https://unsplash.it/804/804);}
    .bg18 {background: url(https://unsplash.it/799/804);}
    .bg19 {background: url(https://unsplash.it/798/803);}
    .bg20 {background: url(https://unsplash.it/803/797);}
/* end demonstration background fluff */

.my-image {
    width: auto;
    height: 100%;
    vertical-align: middle;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

<div class="my-image-parent">
    <div class="my-image bg1"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg2"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg3"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg4"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg5"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg6"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg7"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg8"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg9"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg10"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg11"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg12"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg13"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg14"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg15"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg16"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg17"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg18"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg19"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg20"></div>
</div>

Luaskan cuplikan

Saya haz kode
sumber

Pembungkusan kisi CSS

Jawaban:

auto-fill

auto-fit

auto-fill vs. auto-fit

CodePen

`auto-fill`

`auto-fit`

`auto-fill` vs. `auto-fit`