时间戳

首页 > 解决方案 > CSS Grid Justify-Content 不适用于所有值

html - CSS Grid Justify-Content 不适用于所有值

问题描述

有人可以帮我解释为什么 CSS 网格 justify-content 不起作用吗？对于此示例，当我将列更改为 100 像素时，justify-content 有效，但值拉伸无效。然后当我将列更改为 1fr 时，justify-content 不适用于所有值。justify-items 和 justify-content 之间有区别吗？我不明白。CodeAcademy 说，“我们可以使用 justify-content 来沿行轴定位整个网格。” 整个网格是什么意思？这是网格容器内的所有项目吗？ 

.container{
  display:grid;
  grid-template: repeat(2, 100px)/repeat(4, 1fr);
  border: 1px solid black;
  justify-content: start;
}
.header{
  background-color: skyblue;
  border: 1px solid orange;
}
.main{
  background-color: #C8FE2E;
  border: 1px solid orange;
}
.aside{
  background-color: #F6CEF5;
  border: 1px solid orange;
}
.footer{
  background-color: #A9F5F2;
  border: 1px solid orange;
}
<div class="container">
  <div class="header">Header</div>
  <div class="main">Main</div>
  <div class="aside">Aside</div>
  <div class="footer">Footer</div>
</div>

标签： htmlcss

解决方案

如果您将列修复设置为 100 像素，则没有什么可拉伸的！它的修复！如果您将列设置为 1fr，则您的项目会占用所有可用空间，那么周围就没有空间来证明某些东西是合理的。基于列定义，某些值（自然）没有效果。可能一些 minmax() 是您的解决方案示例：

 grid-template-columns: repeat(auto-fill, minmax(150px, max-content));

看看这里： https ://css-tricks.com/snippets/css/complete-guide-grid/ （从网格开始的最佳描述）

推荐阅读