CSS网格布局调整内容
Posted
技术标签:
【中文标题】CSS网格布局调整内容【英文标题】：CSS grids layout adjustment to the content 【发布时间】：2022-01-18 20:33:30 【问题描述】：我正在尝试如下设置我的网格布局：
有可能吗？我遇到的问题是，当第 3 项中的内容变大时，它会扩展第 2 项并将其向下推。当第 3 项的内容很大时，有什么办法可以避免这种行为？
.container
display: grid;
grid-template-columns: 200px 200px;
height: 400px;
width: 400px;
background-color: teal;
.grid-element
display: grid;
place-items: center;
border: 1px solid tomato;
background-color: wheat;
font-size: 24px;
<div class='container'>
<div class='grid-element'>1</div>
<div class='grid-element'>2</div>
<div class='grid-element'>3</div>
</div>【问题讨论】：
刚刚编辑了我的帖子。 ***.com/questions/42946454/… 【参考方案1】：使用 css.repeat(auto-fit, minmax(100px, 1fr)) 的响应式网格示例代码；和溢出换行：断字；添加适合内容。
<style>
.item1
grid-area: area1;
.item2
grid-area: area2;
.item3
grid-area: area3;
.grid-container
display: grid;
grid-template-areas: 'area1 area1 area1 area2 area2'
'area1 area1 area1 area2 area2'
'area1 area1 area1 area3 area3'
'area1 area1 area1 area3 area3';
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
background-color: #2196F3;
padding: 10px;
overflow-wrap: break-word;
.grid-container > div
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
</style>
<div class="grid-container">
<div class="item1">3</div>
<div class="item2">2</div>
<div class="item3">1</div>
</div>
【讨论】：
【参考方案2】：我不确定我是否正确理解了您的问题，但我希望以下 sn-p 对您有所帮助：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container
width: 200px;
height: 200px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-template-areas: "d1 d3" "d2 d3";
.container>div:nth-child(1)
grid-area: d1;
.container>div:nth-child(2)
grid-area: d2;
.container>div:nth-child(3)
grid-area: d3;
overflow: auto;
</style>
</head>
<body>
<div class="container">
<div style="background-color: blue;">item1</div>
<div style="background-color: yellow;">item2</div>
<div style="background-color: orangered;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum facere facilis reprehenderit corporis, iure dolorum harum suscipit ratione fuga iste rem laboriosam aut perspiciatis libero nostrum praesentium? Quae, illum sed?</div>
</div>
</body>
</html>【讨论】：
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。以上是关于CSS网格布局调整内容的主要内容，如果未能解决你的问题，请参考以下文章