标签: css-grid

假设我有一个简单的网格，它将项目放在 4 列中，填充整个容器宽度：

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  justify-content: center;
}

.item {
  height: 100px;
  background-color: red;
}

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

这非常有效，直到我有 3 个或更少的项目。它们被放入相应的单元格中，但由于右侧的单元格是空的，因此在视觉上网格开始看起来“左对齐”。如果容器本身位于页面的中心，这并不酷。

当网格有 3 个或更少的项目时，如何使网格居中？我尝试使用repeat(auto-fit, 25%)但它没有考虑grid-gap到。repeat(auto-fit, minmax(25%, 1fr))拉伸内容而不是居中。

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

我是 HTML 和 CSS 的初学者，所以我一直在试验不同的系统，如 Flex 和 CSS Grid。我遇到了无法向网格列内的元素添加填充的问题。有没有什么办法解决这一问题？当我尝试向物理标题本身添加填充时，它不起作用，因为它是显示网格，这是代码：

header{
    width:100%;
    height: 5%;
    color: #fff;
    background: #434343;
    display: grid;
    grid-template-columns: 2fr auto;
}


header:not(menu, h1, nav){
    display: block;
    padding:500px;

}

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

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

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

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

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

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

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

我从一个应该是两列宽的对象生成一个表（使用 vue.js）。每一列都来自对象的键和值。这等效于以下实际的 HTML：

<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>

我使用 CSS 网格将它们格式化div为 2x2 网格，我希望是

this is something long on the first row | short 1st row
wazaa 2nd row                           | wazii 2nd row

执行此操作的代码：

<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div> …

I've listed the div which has a fixed height like masonry. The code works in Firefox, but not in Chrome. The reference code I've referred is CSS-only masonry layout.

Chrome Browser Mozila Firefox Browser

.container {
  width: 1080px;
  margin: 0 auto;
}

.grid-container {
  display: grid;
  grid-auto-rows: 1px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  font-size: 50px;
  margin: 5px;
}

.grid-row-200 {
  grid-row: span 200;
}

.grid-row-225 {
  grid-row: span …

在 CSS 网格中使用 grid-template-areas 时，我想要一个跨越整个宽度的标题。是的，我可以使用 repeat( 12, 1fr) 定义模板网格列，但我正在寻找一种使用它的方法，而不必将列的名称写入 12 次。见下文。

grid-template-areas: 
            "article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero"
            "header header header header header header header header header header header header"
            "main main main main main main main main main aside aside aside"
            "footer footer footer footer footer footer footer footer footer footer footer footer";

第一行有 'article-hero 写了 12 次，有没有办法使用重复，这样我就可以做repeat(12,article-hero)而不是写 12 次？

我input在 CSS 网格容器内有一个元素。容器应该是 100 像素宽，input元素占据大部分空间，一个other-thing占据剩余的 24像素。我正在grid-template-columns为此使用。

如果我将父容器设置为 200 像素而不是 100 像素，这可以正常工作：

.container {
  grid-template-columns: 1fr 24px;
  grid-template-rows: 1fr;
  display: grid;
  justify-content: center;
  align-items: center;
  width: 200px; /* Try 100px */
  background-color: red;
}

以及以下 HTML

<div class="container">
  <input value="hello"/>
  <div class="other-thing">
    x
  </div>
</div>

但是如果我将容器设置为 100px 宽，输入会突然拒绝缩小 - 所以它与红色容器重叠。

我知道input元素有一个用户样式表，但我看不到任何与宽度或显示相关的内容，我应该覆盖。

这是一个jsfiddle

如何input仅使用容器中的剩余空间，最好使用grid-template-columns？

我必须在我们使用最新版本的 Angular 项目中支持 IE 11。我真的很喜欢使用 IE 11 能够使用的 CSS 网格功能。但我不知道如何让 Autoprefixer 正常工作。

我的问题与另一个问题中的问题完全相同，但这涉及另一个版本。

我在 Stackblitz 上创建了一个最小的测试用例。

我像这样配置了 browserslist 文件：

> 1%
IE 11

我添加了一个控制注释来启用 Autoprefixer 的网格功能：

/* autoprefixer grid: on */

（我在两个 CSS 文件、全局样式和组件样式中都这样做了）

我对 browserslist 的这种配置和 CSS 文件中的控件注释的期望是，Autoprefixer 添加display: -ms-grid;到 CSS 输出中。但事实并非如此。

我想使用 CSS Grid 为我正在构建的表格中的每一行着色。但是我无法让它工作，我只能让其他所有列都着色。这是我想做的事情的图片。有没有更好的方法来构建它？我只使用 CSS Grid 因为它是我想学习的新东西。

我希望它看起来如何的图片

我的桌子的图片

这是我当前的代码：

  .wrapper {
  border-style: solid;
  border-color: rgb(230, 230, 230);
  font-weight: bold;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(18, 35px);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.wrapper>div:nth-child(odd) {
  background: #ddd;

<div class="container">
  <div class="wrapper">
    <div>Month</div>
    <div>Overtime Hours</div>
    <div>Compensation Hours</div>
    <div>Vacation</div>
    <div>Personal Hours</div>
    <div>Sick Hours</div>

    <div>Carry Over</div>
    <div>0.00</div>
    <div>-</div>
    <div>35.00</div>
    <div>-</div>
    <div>-</div>


    <div>Allotted</div>
    <div>-</div>
    <div>-</div>
    <div>140.00</div>
    <div>14.00</div>
    <div>-</div>

    <div>Starting Total</div>
    <div>0.00</div>
    <div>-</div>
    <div>175.00</div>
    <div>14.00</div>
    <div>-</div>

    <div>Jan</div>
    <div>-</div>
    <div>-</div>
    <div>-</div>
    <div>2.00</div>
    <div>7.00</div>


    <div>Feb</div> …