CSS网格布局调整内容答案

【问题标题】：CSS grids layout adjustment to the contentCSS网格布局调整内容
【发布时间】：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>

【问题讨论】：

刚刚编辑了我的帖子。
stackoverflow.com/questions/42946454/…

标签： html css layout css-grid

【解决方案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。