使用WindiCSS的Svelte Grid布局问题：Div占用空间过大

问题原因 #

你当前使用grid-cols-2会强制将容器等分为两列，第二列会占据一半宽度，导致出现多余空白区域。

解决方案 #

方案1：让列宽根据内容自适应调整 #

将grid-cols-2替换为grid-cols-[min-content_1fr]，让第一列仅占用内容所需宽度，第二列填充剩余空间：

<div class="grid grid-cols-[min-content_1fr] w-auto">
  <div class="w-15">
    <img class="h-15" src="https://starnumber.tk/logo.png" alt="logo">
  </div>
  <div>
    <p class="text-left font-mono"><span class="text-xl">StarNumber12046</span><br>Svelte lover</p>
  </div>
</div>

方案2：让Grid容器仅包裹内容宽度 #

使用inline-grid替代grid，让整个Grid容器收缩为内部内容的总宽度，避免占满父容器：

<div class="inline-grid grid-cols-2 gap-2 w-auto">
  <div class="w-15">
    <img class="h-15" src="https://starnumber.tk/logo.png" alt="logo">
  </div>
  <div>
    <p class="text-left font-mono"><span class="text-xl">StarNumber12046</span><br>Svelte lover</p>
  </div>
</div>

内容的提问来源于stack exchange，提问作者StarNumber12046