使网格足以容纳其内容

Question

我的HTML页面中包含的网格包含在网格中，而所有网格都以母网格的形式包含。 这可能很难看，但这是我网站的结构要求。

当窗口较小时，网格也变小，并且在某一点不可读。

我想当窗口变得太小时，出现一个（水平）滚动条以使整个页面可读。

我读了一本关于CSS的书，但没有给我答案：（

有什么想法吗？

Zlotz

Answer 1

Imho，最好的答案是Christoper的。您可以在这里查看CSS单元：CSS Units，以选择最适合您的CSS单元。

针对您的情况的最佳选择应该是 vw （相对于视口宽度），％（相对于父级宽度）或 em / rem （相对于字体大小，第一个表示当前元素，第二个表示根元素）

如果您尝试使用 vw 单元，请记住在标头上定义视口元标记。例如：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 2

从问题说明中推断，请找到下面的代码，这些代码针对大屏幕和小屏幕断点运行，在网格内部包含网格的母网格....以及一个单独的滚动条，以清晰的方式控制网格视图屏幕尺寸较小，并已附上屏幕截图以支持该屏幕截图。

div{
border: 1px solid black;
padding: 12px;
margin: 0.5px;
}
div.mother-grid{
display: grid;
grid-template-columns: 350px 350px;

}
div.sub-grid{
  display: grid;
  grid-template-columns: 150px 150px;
}
div.mother-grid{
  max-width: 100%;
  overflow: auto;
}

<div class="mother-grid">
<div class="sub-grid">

<div class="sub-sub-grid">This is sub grid level 2</div>
<div class="sub-sub-grid">This is sub grid level 2</div>
</div>
<div class="sub-grid">

<div class="sub-sub-grid">This is sub grid level 2</div>
<div class="sub-sub-grid">This is sub grid level 2</div>
</div>
</div>

Answer 3

为每个单元格（当然，取决于单元格类）指定min-width而不是整个页面。然后，整个页面的有效min-width将由布局引擎在内部进行计算。

Answer 4

最好的方法是同时使用媒体查询和自动填充自动调整功能，以进行响应式开发。

//mobile/tablet portrait
@media only screen and (max-width: 768px) {
    .inner-grid {
         grid-template-columns: repeat(auto-fill, 186px); // you can try
     }
}
@media only screen and (max-width: 1024px) {
    .inner-grid {
     }
}

此链接可能会有所帮助 CSS grid wrapping

Answer 5

如果要查看水平滚动条，则需要使网格单元在x轴上可滚动，请使用下面的overflow-x属性。但是，如果希望子网格不缩小，则需要删除网格布局，或者为子网格提供最小的高度和宽度，以便它可以创建滚动条。

overflow-x : scroll;

Answer 6

为什么不在CSS中使用这些

min-width:100px;

//or 

max-width:800px;