时间戳

首页 > 解决方案 > 使用 CSS Grid 包裹两列 | 最大含量和最小最大值

css - 使用 CSS Grid 包裹两列 | 最大含量和最小最大值

问题描述

我正在尝试使用 Grid 显示具有以下属性的两列网格。

最后一个属性是在宽度规则被破坏后将内容包装成两行。

过去一天左右我一直在为此苦苦挣扎，这应该很简单！但我仍然找不到解决方案。任何帮助将不胜感激！。这就是我到目前为止所拥有的。

.grid-container-1 .grid-item-1 {
  grid-area:one;       
  background-color: red;
	
}

.grid-item-2 {
  grid-area:two;
  background-color: blue;
}

.grid-container-1 {
  display:grid;
  grid-template-columns: max-content repeat(auto-fit, minmax(100px 1fr));
  grid-template-rows:50px;
  grid-template-areas:
  "one two";
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test</title>
     <link href="style.css" rel="stylesheet">
  </head>
  <body>
  <div class="grid-container-1">
   <div class="grid-item-1">This is the line that should show max-content</div>
   <div class="grid-item-2">This has a min width of 100px</div>
  </div>
  </body>
</html>

标签： csscss-grid

解决方案

推荐阅读