标签: css-grid

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 3px;
  border: 1px solid green;
}

.item {
  border: 1px solid red;
  height: 50px;
}

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

如何将红色item盒子拉伸一点,使它们填满绿色container盒子的整个宽度？

它们应该都是相同的宽度,并且大于100px.

最后一行应该像现在一样左对齐.

最近，我使用CSS grid创建了一个布局。尽管效果很好，但我对它的工作方式感到困惑。具体来说，我对这条线感到困惑grid-template-rows: auto auto 1fr auto;。

最终发生的是页眉和页脚根据内容确定大小，这很有意义，因为它们跨越了页面的宽度。文章本身的大小取决于其内容。但是，“标题”和“导航”被拆分，以使标题根据内容的大小确定，并且导航占用了其余空间。

如果我grid-template-rows: auto auto auto auto;改用标题和导航，则它们将共享相等的间距，这不是我想要的。

如何auto auto 1fr auto解释它，以便给我确定大小，使标题占据最小的空间，而导航则占据其余空间？在这种情况下，“ fr”和“ auto”如何相互作用？

main {
    display: grid;
    grid-template-columns: 10rem auto;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "header header" "title article" "nav article" "footer footer";
}
    
header {
  grid-area: header;
  background: lightblue;
}

div {
  grid-area: title;
  background: orange;
}

nav {
  grid-area: nav;
  background: pink;
}

article {
  grid-area: article;
  background: yellow;
}
  
footer {
  grid-area: footer; …

我想创建一个项目网格，在每行上放置尽可能多的项目。它应该：

• 自动调整列大小以适合其元素
• 自动添加/删除列以适合容器

实际上，我正在寻找一个具有自动调整列大小和自动列数的表。Flexbox withflex-wrap对我不起作用，因为列不会对齐。

我尝试过使用gridwith auto-fill，但我不知道如何确保每列增长以适应其内容。在此示例中，仅当我指定固定的最小宽度时它才有效，例如：

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

我尝试用 替换该minmax函数auto，但这会导致每列占用 100% 宽度。还有另一种方法可以实现我想要做的事情（不使用 JavaScript）吗？

div {
  width: 300px;
  border: 1px solid red;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}

<div>
  <span>word</span>
  <span>word</span>
  <span>longword</span>
  <span>word</span>
  <span>longword</span>
  <span>word</span>
  <span>word</span>
  <span>word</span>
  <span>word</span>
  <span>word</span>
  <span>word</span>
  <span>word</span>
  <span>word</span>
  <span>word</span>
</div>

我想要的布局看起来就像上面一样，除了包含“长字”单元格的任何列都足够宽以适合该单元格（并且如果需要，列数会缩小）。最终结果将是几个自动调整大小的列，每个列的宽度仅根据单元格内容的需要而定。基本上是一个具有不确定列数的 HTML 表格。

我正在使用 CSS 网格布局来定位网站上的各个部分。我使用grid-column: x / x;和grid-row x / x;来设置它们在页面上的位置和大小。它工作得很好。

现在，我正在尝试在屏幕尺寸更改时发生的两个网格列修复之间的平滑过渡设置动画。变化是 from grid-column: 3 / 9;，grid-column: 2 / 10;这意味着 div 在1fr每一侧都增长。目前它只是“ping”到位，但我希望两者之间有一个平稳的过渡。

任何人有任何想法如何解决它？

这是我的 CSS 文件中的片段：

nav {
    background-color: $company-blue;
    border          : 3px solid $company-yellow;
    opacity         : 0.8;
    grid-column     : 3 / 9;
    grid-row        : 3 / 4;
    ...
    @media screen and (max-width: 1378px) {
    grid-column : 2 / 10;
    }
}

我开始使用 CSS 网格（非常棒！）。我从最基本的布局开始：移动布局。此外，随着网页的增长，我正在使用媒体查询来更改布局。

现在，我的布局由 3 个区域组成。确切的顺序是内容区、侧边栏区和评论区。该评论区是可选的，甚至有可能不会显示。区域之间有40px的间隙。

这是移动布局css

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  grid-gap: 40px;
}

如果评论区不存在，评论区的间隙也不存在，这就是我想要的。

https://jsfiddle.net/p54od8ho/

当页面增长时，我正在更改布局，如下所示：

@media screen and (min-width: 768px) {
  .content {
    grid-area: content;
  }
  .sidebar {
    grid-area: sidebar;
  }
  .comments {
    grid-area: comment;
  }
  .grid {
        grid-template-columns: 1fr 300px;
        grid-template-rows: auto;
        grid-template-areas:
            "content sidebar"
            "comment sidebar";
  }
}

https://jsfiddle.net/g20gtd4z/

40px的差距是因为评论区存在。

但是，当评论区不存在时会发生这种情况：

https://jsfiddle.net/6Lfg55my/1/

如果您注意到，即使评论区不存在，40px 的差距也存在。

我相信一个解决方案是创建一个类，只是为了删除评论区。

.grid.no_comment {
            grid-template-areas:
                "content sidebar"
                ". sidebar";
      }

必须有更好更简单的方法（或者可能没有）。有没有办法，只使用网格选项，当评论区不存在时，差距也消失了？

我想弄清楚如何使网格的两列具有相同的高度。这是我所追求的：

xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx 

X qqqqqqqqqqqqq X X qqqqqqqqqqqqqqq X 

X qqqqqqqqqqqqq X X qqqqqqqqqqqqqqq X 

XX X qqqqqqqqqqqqqqq X 

XX X qqqqqqqqqqqqqqq X 

xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx

这是 x 代表网格的边界（显示：网格）而 q 是标签和输入字段的地方。这是 codepen 上的所有代码和相同的链接。

.container {
    font-family: Arial, Helvetica, Sans-Serif;
    color: #666;
    font-size: 12px;
    position: absolute;
    width: 100%;
    margin: 0 auto;
    border: 1px solid #666;
    background-color: #fff;
    height: 100%;
}

.outerGrid {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr 1fr;
  grid-template-rows: 80px 1fr 1fr 30px;
  grid-gap: 20px;
  grid-template-areas: 
    "title title title title" 
    ". …

是否可以创建一个grid-template-area定义某些区域（如页眉和页脚）的，同时允许在它们之间创建未知数量的行？

我将拥有用户生成的内容，所以我不知道要划分多少行。我想确保第一个和最后一个是页眉和页脚。

幻想示例：

#grid {
    display: grid;
}

.big {
    grid-template-columns: repeat(3 1fr);
    grid-template-rows: auto;
    grid-template-areas:
    "header header header"
    "misc misc misc"
    [* * *] <---- unknown rows
    "footer footer footer";
}

.small {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "header"
    "misc"
    [*] <---- unknown rows
    "footer";
}

我是 css grid 的新手，我试图弄清楚如何让一列完全消失并强制其他列堆叠。

我基本上希望下面的红色划掉的完全消失，只需将网格中的所有其他东西堆叠成几行。

使用下面的代码，我想block 4消失。然后我想要块 1/2/3/5/6 堆叠。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(155px, 1fr)) 1fr;
  grid-gap: 10px;
  padding: 0.5rem;
}

<div class="wrapper">
  <div>
    Block 1
  </div>
  <div>
    Block 2
  </div>
  <div>
    Block 3
  </div>
  <div>
    Block 4
  </div>
  <div>
    Block 5
  </div>
  <div>
    Block 6
  </div>
</div>

它的代码笔：

https://codepen.io/allencoded/pen/goNYwv

我正在尝试使用扁平的 HTML 结构制作一个简单的侧边栏布局，其中第一个<aside>元素完全填充第一列。

我的问题是，负行结束值似乎不适用于为第二列中的所有元素隐式创建的行。

预期的：

实际的：

下面是说明问题的可运行代码片段。

article {
  display: grid;
  grid-template-columns: 200px 1fr;
  background: gray;
}

aside {
  grid-row: 1/-1;
  grid-column: 1/2;
  background: pink;
}

section {
  grid-column: 2/3;
  background: yellow;
}

<article>
  <aside>In the left column (top to bottom)</aside>
  <section>In the right column</section>
  <section>In the right column</section>
  <section>In the right column</section>
</article>

我希望一个项目从第一列开始并在最后一列结束，无论有多少列。

它应该像这样工作：

item {
  grid-column-start: 1;
  grid-column-end: -1;
}

根据 MDN：

将第 n 条网格线添加到网格项的位置。如果给出负整数，则相反，从显式网格的结束边缘开始计数。

所以这只适用于显式网格？为什么它不能在隐式网格上工作？