英文:
Why do the grid children change size depending on the content
问题
以下是使用普通网格实现的期望结果：
原始代码：
import { Card } from "@/components/ui/card";
export default function Home() {
return (
<div className="mx-auto max-w-screen-xl xl:h-[50rem] px-4 xl:px-0 xl:grid xl:grid-flow-col xl:grid-rows-4 xl:gap-6">
<div className="h-[20rem] xl:h-auto xl:row-span-2">
<Card className="w-full h-full">hello</Card>
</div>
<div className="h-[20rem] xl:h-auto xl:row-span-2">
<Card className="w-full h-full">hello</Card>
</div>
<div className="h-[40rem] xl:h-auto xl:row-span-4">
<Card className="w-full h-full">hello</Card>
</div>
<div className="h-[10rem] xl:h-auto xl:row-span-1">
<Card className="w-full h-full">hello</Card>
</div>
<div className="h-[30rem] xl:h-auto xl:row-span-3">
<Card className="w-full h-full">hello</Card>
</div>
</div>
);
}
然而，当我在其中添加内容时，我所做的形状会改变。
但是如果我添加宽度，它就不会改变：
import { Card } from "@/components/ui/card";
export default function Home() {
return (
<div className="mx-auto max-w-screen-xl xl:h-[50rem] px-4 xl:px-0 xl:grid xl:grid-flow-col xl:grid-rows-4 xl:gap-6">
<div className="h-[20rem] xl:h-auto xl:row-span-2 xl:w-[27rem]">
<Card className="w-full h-full overflow-auto">lorem1000</Card>
</div>
<div className="h-[20rem] xl:h-auto xl:row-span-2 xl:w-[27rem]">
<Card className="w-full h-full">hello</Card>
</div>
<div className="h-[40rem] xl:h-auto xl:row-span-4 xl:w-[27rem]">
<Card className="w-full h-full">hello</Card>
</div>
<div className="h-[10rem] xl:h-auto xl:row-span-1 xl:w-[27rem]">
<Card className="w-full h-full">hello</Card>
</div>
<div className="h-[30rem] xl:h-auto xl:row-span-3 xl:w-[27rem]">
<Card className="w-full h-full">hello</Card>
</div>
</div>
);
}
是否有一种方法可以在不明确定义宽度，即w-[27rem]的情况下实现这一点，或者这是CSS的工作方式？
英文:
Here is the desired result with plain grid
original code:
import { Card } from "@/components/ui/card";
export default function Home() {
return (
<div className="mx-auto max-w-screen-xl xl:h-[50rem] px-4 xl:px-0 xl:grid xl:grid-flow-col xl:grid-rows-4 xl:gap-6">
<div className="h-[20rem] xl:h-auto xl:row-span-2">
<Card className="w-full h-full">hello</Card>
</div>
<div className="h-[20rem] xl:h-auto xl:row-span-2">
<Card className="w-full h-full">hello</Card>
</div>
<div className="h-[40rem] xl:h-auto xl:row-span-4">
<Card className="w-full h-full">hello</Card>
</div>
<div className="h-[10rem] xl:h-auto xl:row-span-1">
<Card className="w-full h-full">hello</Card>
</div>
<div className="h-[30rem] xl:h-auto xl:row-span-3">
<Card className="w-full h-full">hello</Card>
</div>
</div>
);
}
However when i add content inside of it, the shape i made changes.
But if i add width it dose not
import { Card } from "@/components/ui/card";
export default function Home() {
return (
<div className="mx-auto max-w-screen-xl xl:h-[50rem] px-4 xl:px-0 xl:grid xl:grid-flow-col xl:grid-rows-4 xl:gap-6">
<div className="h-[20rem] xl:h-auto xl:row-span-2 xl:w-[27rem]">
<Card className="w-full h-full overflow-auto">lorem1000</Card>
</div>
<div className="h-[20rem] xl:h-auto xl:row-span-2 xl:w-[27rem]">
<Card className="w-full h-full">hello</Card>
</div>
<div className="h-[40rem] xl:h-auto xl:row-span-4 xl:w-[27rem]">
<Card className="w-full h-full">hello</Card>
</div>
<div className="h-[10rem] xl:h-auto xl:row-span-1 xl:w-[27rem]">
<Card className="w-full h-full">hello</Card>
</div>
<div className="h-[30rem] xl:h-auto xl:row-span-3 xl:w-[27rem]">
<Card className="w-full h-full">hello</Card>
</div>
</div>
);
}
is there a way to achieve this without me defining the width specifically, i.e w-[27rem] or is this how css works ?
答案1
得分: 1
你可以设置网格容器的列数，以确保它们保持像上面照片中的格式，然后你可以指定网格元素占据的列数。这基本上与你使用 row-span 做的事情一样：
<div className="mx-auto max-w-screen-xl xl:h-[50rem] px-4 xl:px-0 xl:grid xl:grid-flow-col xl:grid-rows-4 xl:gap-6 xl:grid-cols-3">
<div className="h-[20rem] xl:h-auto xl:row-span-2 xl:col-span-1">
<Card className="w-full h-full">hello</Card>
</div>
<div className="h-[20rem] xl:h-auto xl:row-span-2 xl:col-span-1">
<Card className="w-full h-full">hello</Card>
</div>
<div className="h-[40rem] xl:h-auto xl:row-span-4 xl:col-span-1">
<Card className="w-full h-full">hello</Card>
</div>
<div className="h-[10rem] xl:h-auto xl:row-span-1 xl:col-span-1">
<Card className="w-full h-full">hello</Card>
</div>
<div className="h-[30rem] xl:h-auto xl:row-span-3 xl:col-span-1">
<Card className="w-full h-full">hello</Card>
</div>
</div>
英文:
You can set the grid container to have a number of columns to ensure that they stay formatted like you have in the photo above, and then you can dictate the number of columns that the grid elements take up. Its pretty much the same idea as what you've done with the row-span:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<div className="mx-auto max-w-screen-xl xl:h-[50rem] px-4 xl:px-0 xl:grid xl:grid-flow-col xl:grid-rows-4 xl:gap-6 xl:grid-cols-3">
<div className="h-[20rem] xl:h-auto xl:row-span-2 xl:col-span-1">
<Card className="w-full h-full">hello</Card>
</div>
<div className="h-[20rem] xl:h-auto xl:row-span-2 xl:col-span-1">
<Card className="w-full h-full">hello</Card>
</div>
<div className="h-[40rem] xl:h-auto xl:row-span-4 xl:col-span-1">
<Card className="w-full h-full">hello</Card>
</div>
<div className="h-[10rem] xl:h-auto xl:row-span-1 xl:col-span-1">
<Card className="w-full h-full">hello</Card>
</div>
<div className="h-[30rem] xl:h-auto xl:row-span-3 xl:col-span-1">
<Card className="w-full h-full">hello</Card>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论