标签: css-grid

我是 CSS Grid 的新手，在 Google 搜索后，我没有找到我想要的东西，我想知道对齐和调整属性，flex-start/flex-end 和开始/结束值之间有什么区别？

我有一个基本的网格设置如下：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
  grid-gap: 1rem;
}

当网格自动分成新行时，我要么希望新行上的元素占据一定比例的空间，要么居中以便它们看起来不错。

例如，如果我在一行中有 3 个元素，那么我希望每个元素占用 33% 的容器空间。但是，当网格中断并且新行上只有 1 个元素时，我希望该元素占据行宽的 100%，或者至少看起来居中——这与将元素全部放置在中间的默认行为相反。向左移动，仅占用 1fr 的空间。

同样，如果新行中有 2 个元素，则每个元素应占据行空间的 50%，或者两个元素一起看起来应居中。

我不知道总共会有多少个元素。理想情况下，该解决方案应适用于最少 1 个到任意数量的元素。

如果有人有任何想法，请告诉我。谢谢。

我真的不认为这应该那么难。我有未知数量的列要在 CSS 网格中显示。我希望所有列的宽度都相同以匹配内容。我希望它是最小内容，这样当文本太长时就会换行。我尝试了许多不同的变化。但本质上，这就是我认为我想要的，并且不确定为什么浏览器在线上显示“无效的属性值” grid-template-columns。

.flyer-container > div {
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
}

我正在使用 css 网格制作一个表格。我无法向行添加边框线。柱与柱之间有间隙。应该像图片中那样

这是我向单元格添加 border-bottom 时得到的结果：

const TableWrapperUI = styled.div`
  display: grid;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #dbeaf4;
  grid-template-columns: repeat(
    ${props => props.columns && props.columns},
    fit-content(400px)
  );
  justify-items: center;
  padding: 5px;
  justify-content: space-between;
  > span {
    justify-self: left;
    border-bottom: 1px solid red;
  }
`;

您可以在这里查看：https ://codesandbox.io/s/goofy-easley-w5rrg

我目前正在学习 CSS 网格，并且尝试在 CSS 网格项单元格内使用 Chart.JS，但是如果调整浏览器的大小，图表不会像其他项目那样随网格调整大小。

但是，如果您以新的窗口大小刷新浏览器，图表和网格会正确加载。

我有一个 CodePen 并将代码片段插入到 StackOverflow 中，如果有人能给我任何关于我做错了什么的指示，我将不胜感激。

https://codepen.io/warrenbuckley/pen/BXaQwY

var lineCtx = document.getElementById('line').getContext('2d');

var lineChart = new Chart(lineCtx, {
  type: 'line',
  data: {
    labels: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri'],
    datasets: [{
        label: 'Number of Members a Day',
        data: [12, 5, 8, 35, 4],
        backgroundColor: [
          '#ff8a89'
        ],
        borderColor: [
          '#ff8a89'
        ],
        borderWidth: 4,
        fill: false,

        pointBorderWidth: 4,
        pointBackgroundColor: "#ffffff",
        pointBorderColor: "#ff8a89",
        pointRadius: 8,

        pointHoverBorderWidth: 4,
        pointHoverBackgroundColor: "#ffffff",
        pointHoverBorderColor: "#ff8a89",
        pointHoverRadius: 8
      },
      {
        label: 'Failed Logins', …

我有一个容器div，里面有一些填充物，display: grid并overflow: auto已设置。当子级div的高度大于父级的高度并且出现滚动条时，它会滚动，以便没有底部填充。

这是一个提琴手。

.container {
    background: red;
    display: grid;
    height: 300px;
    padding: 3em;
    overflow: auto;
    width: 300px;
}

.child {
    height: 500px;
    background: #000;
}

<div class="container">
    <div class="child"></div>
</div>

但是，如果容器的制作方式不是display: grid，则向下滚动时会出现底部填充。

display: grid这是元素的预期行为吗？如果是这样，为什么？恢复底部填充的正确方法是什么，最好只使用CSS？

我想使用设置网格中每一行的行高grid-template-rows: repeat(auto-fill, 200px)，但意识到它仅适用于网格的第一行。事实证明grid-auto-rows: 200px更适合我的需求，但我仍然想知道为什么使用auto-fillingrid-template-rows: repeat(auto-fill, 200px)只设置第一行而不是所有行的高度。注意：如果我使用整数而不是auto-fill正确设置指定行数的高度。

图片示例：

• grid-template-rows: repeat(auto-fill, 200px)
• grid-template-rows: repeat(3, 200px)

我有这段 css 来设置网格的列：

grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

这工作正常，但我想扩展它，这样我就可以使用最大像素数的百分比值，如下所示：

grid-template-columns: repeat(auto-fill, minmax(minmax(15%, 180px), 1fr));

但这只给了我 100% 宽度的列。这绝对不是我想要的。
我该如何实现这个目标？

我有一个由两个元素组成的网格，一个图像和一些文本。

.card {
  width: 100%;
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: 50vw;
  grid-template-areas:
  "a b"
}

.card-text {
  grid-area: a;
  background-color: #02B277;
}

.card-text p {
  width: 70%;
  margin: auto;
  top: 10rem;
  font-weight: 500;
}

.image {
  background: url('img/placeholder.jpg');
  background-size: cover;
  grid-area: b;
}

<div class="card">

      <div class="card-text">
       <p>Lorem ipsum blablabla</p>
      </div>

      <div class="image">
      </div>

</div>

当窗口水平缩小时，具有固定 的文本font-size会自动垂直扩展，溢出 div。如何使网格模板行展开以包围文本？我已经尝试将其设置为，auto但它只是遵循图像的比例。

我创建了一个 CSS 网格，每行有 2 列。第一列占宽度的 25%，第二列占宽度的 75%。我已经实现了这个使用

    .grid-container{
             display:inline-grid;
             grid-template-columns: 1fr 3fr;
    }

现在，我想让它具有响应能力，以便当屏幕尺寸减小到超过某一点时，该列应该彼此重叠，并且每一列应该占据宽度容器的 100%。

我在网上遇到的每个解决方案都使其具有响应性，但它​​也会将我的初始列宽从 25%:75% 更改为 50%:50%，我想避免这种情况。任何建议或提示将不胜感激。谢谢大家！