Tailwind：无间隙的动态网格列

Answer 1

空白是由于网格轨道列比它们包含的图像宽而引起的。这是由于

minmax(0, 1fr)

内的

repeat()

值造成的。该值意味着网格列轨道的宽度允许增加到 1“份额”的空间。

为了防止这种行为，您可以考虑在

repeat()

中使用不同的值，例如

max-content

:

<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

<style>
  [x-cloak] {
    display: none !important;
  }
</style>

<div
  x-data="{
    inputId: 'blabla',
    selectedFileName: '',
    fileInput: null,
    multiple: true,
    images: [],
    imgCols: 0
  }"
  x-init="() => {
    fileInput = document.getElementById(inputId);
  }"
  class="w-full"
  x-on:drop="$event => {
    $event.preventDefault();
    const dataTransfer = new DataTransfer();

    if (multiple) {
      Array.from(fileInput.files).forEach(file => {
        dataTransfer.items.add(file);
      });
    }

    Array.from($event.dataTransfer.files).forEach(file => {
      dataTransfer.items.add(file);
    });

    fileInput.files = dataTransfer.files;

    if (!multiple) {
        selectedFileName = $event.dataTransfer.files[0].name;
    } else {
        images = Array.from(fileInput.files);
    }

    fileInput.dispatchEvent(new Event('change', { bubbles: true }));
  }"
  x-on:dragover.prevent="() => console.log('drag over prevented')"
>
  <label
    class="flex justify-center w-full h-32 px-4 transition bg-white border-2 border-gray-300 border-dashed rounded-md appearance-none cursor-pointer hover:border-gray-400 focus:outline-none"
  >
    <span class="flex items-center space-x-2">
      <x-icon name="upload" />
      <span class="font-medium text-gray-600">
        drop or
        <span class="text-blue-600 underline">browse</span>
      </span>
    </span>
    <input id="blabla" type="file" name="file_upload" />
  </label>
  <div x-cloak class="w-full text-center" x-show="selectedFileName">
    files selected: <span x-text="selectedFileName"></span>
  </div>
  <div
    x-show="multiple"
    class="w-auto grid mt-3"
    :style="`grid-template-columns: repeat(${images.length < 6 ? images.length : 6}, max-content)`"
  >
    <template x-for="image in images" :key="image.name">
      <div
        x-data="{
          imgUrl: null
        }"
        x-init="() => {
          let reader = new FileReader();

          reader.onload = e => {
            imgUrl = e.target.result;
          };

          reader.readAsDataURL(image);
        }"
      >
        <img :src="imgUrl" alt="image.name" class="h-24 w-auto" />
      </div>
    </template>
  </div>
</div>