【发布时间】：2023-01-11 12:31:41
【问题描述】：
我的响应式 CSS 网格在特定维度上表现得很奇怪 - 在下面的 sn-p 中，我希望图像占据第一列（自动大小）并跨越给定断点的网格的所有行。
但是，对于这个特定的网格高度/宽度，列宽无意中比实际图像宽。这个奇怪的问题在图像的左侧和右侧留下了不需要的空白区域——应该分配给宽度为 1fr 的第二列的空间。
使网格变宽似乎可以解决这个问题——第一列会立即更改宽度以匹配图像宽度。 （为了您的方便，我使外部 div 可调整大小。）
（笔记：
- 图像不应拉伸，它的高度应为网格的高度，宽度应按比例缩放
- 网格最小高度应为其父元素的 100%）
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0;
border-style: solid;
}
img {
max-width: 100%;
height: auto;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.h-full {
height: 100%;
}
.h-min {
height: -moz-min-content;
height: min-content;
}
.max-h-full {
max-height: 100%;
}
.max-h-fit {
max-height: -moz-fit-content;
max-height: fit-content;
}
.min-h-0 {
min-height: 0px;
}
.w-full {
width: 100%;
}
.w-\[20cqw\] {
width: 20cqw;
}
.w-fit {
width: -moz-fit-content;
width: fit-content;
}
.max-w-full {
max-width: 100%;
}
.max-w-fit {
max-width: -moz-fit-content;
max-width: fit-content;
}
.resize {
resize: both;
}
.grid-cols-\[auto_1fr\] {
grid-template-columns: auto 1fr;
}
.grid-rows-\[auto_auto_1fr_auto\] {
grid-template-rows: auto auto 1fr auto;
}
.flex-col {
flex-direction: column;
}
.justify-self-center {
justify-self: center;
}
.overflow-auto {
overflow: auto;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-sm {
border-radius: 0.125rem;
}
.border-4 {
border-width: 4px;
}
.border {
border-width: 1px;
}
.border-purple-800 {
--tw-border-opacity: 1;
border-color: rgb(107 33 168 / var(--tw-border-opacity));
}
.border-sky-500 {
--tw-border-opacity: 1;
border-color: rgb(14 165 233 / var(--tw-border-opacity));
}
.border-neutral-400 {
--tw-border-opacity: 1;
border-color: rgb(163 163 163 / var(--tw-border-opacity));
}
.border-green-500 {
--tw-border-opacity: 1;
border-color: rgb(34 197 94 / var(--tw-border-opacity));
}
.bg-purple-800 {
--tw-bg-opacity: 1;
background-color: rgb(107 33 168 / var(--tw-bg-opacity));
}
.p-3 {
padding: 0.75rem;
}
.p-2 {
padding: 0.5rem;
}
.p-4 {
padding: 1rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.\@container {
container-type: inline-size;
}
@container (min-width: 20rem) {
.\@xs\:row-span-full {
grid-row: 1 / -1;
}
.\@xs\:h-\[min\(100\%_20cqi\)\] {
height: min(100% 20cqi);
}
.\@xs\:h-\[min\(100\%\2c _20cqi\)\] {
height: min(100%, 20cqi);
}
.\@xs\:w-\[20cqw\] {
width: 20cqw;
}
.\@xs\:grid-cols-\[auto_1fr\] {
grid-template-columns: auto 1fr;
}
.\@xs\:grid-rows-\[auto_1fr_auto\] {
grid-template-rows: auto 1fr auto;
}
}<div
class="resize overflow-auto border border-sky-500 p-2"
style="width: 405px; height: 160px"
>
<div class="flex h-full flex-col border border-green-500 @container">
<h4>Example</h4>
<div
class="grid h-full min-h-0 grid-rows-[auto_auto_1fr_auto] rounded border border-neutral-400 @xs:grid-cols-[auto_1fr] @xs:grid-rows-[auto_1fr_auto]"
>
<img
alt="300"
src="https://via.placeholder.com/300"
width="400"
height="400"
class="@xs:max-w-[min(100%,_20cqi) max-h-full min-h-0 w-fit max-w-full justify-self-center @xs:row-span-full"
/>
<div>
<div class="">Featured product</div>
<div class="">Nutri Ninja Foodi 6L Multi Cooker</div>
</div>
<div class="">$299</div>
<button
class="rounded bg-purple-800 px-4 py-2 text-white"
>
Buy
</button>
</div>
</div>
</div>【问题讨论】：
-
抱歉，如果我直言不讳，但您的代码甚至不接近 minimal reproducible example。不要只是发布所有代码然后看看会发生什么。至少删除您认为我们需要调查的所有禁用代码和名称类/ID。
-
抱歉，我已经清理了 sn-p，但我将致力于简化我直接从 tailwind 中提取的类，这使得重现变得有点困难。希望检查开发控制台中的相关元素足以理解相关的 CSS 网格问题。