标签: css-grid

我设置了transition: all ease-in-out 1s;，但以同样的方式更改 的属性grid-column不起作用transition。

有没有其他方法可以在这里使用动画？

<div class="projects">
    <div class="project" style="background: url(img/p1.png) center no-repeat / cover"></div>
    <div class="project" style="background: url(img/p2.jpg) center no-repeat / cover"></div>
    <div class="project" style="background: url(img/p3.jpg) center no-repeat / cover"></div>
    <div class="project" style="background: url(img/p4.png) center no-repeat / cover"></div>
</div>

.projects {
    width: 100%;
    height: 500px;
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    grid-auto-rows: 500px;
}
.project {
    width: 100%;
    transition: all ease-in-out 1s;
}
.project:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}
.project:nth-child(1):hover { …

我有六个 div A - F。

我很难通过响应方式来做 css grid 来匹配这个标准：

1. 无论如何，所有 div 都应该具有相同的宽度。

2. C 到 DI 之间需要做空间，同时扩展窗口屏幕时它的增长。（向右推 DF）。就像上图一样

3. 当我缩小容器 div DF 应该在顶部并且具有相同的宽度 div。就像这张图片：

到目前为止，我的代码是：

<div class="container">
  <div class="item item--1">A</div>
  <div class="item item--2">B</div>
  <div class="item item--3">C</div>
  <div class="item item--4">D</div>
  <div class="item item--5">E</div>
  <div class="item item--6">F</div>
</div>

.container {

  background-color: #ddd;

  display: grid;

  /*grid-template-rows: repeat(2, minmax(150px, min-content));*/
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  /* grid-auto-rows: 150px;*/

  .item {
  padding: 10px;
  color: white;
  font-family: sans-serif;
  font-size: 30px;
  background-color: orangered; 

    &--1 { background-color: orangered; }
    &--2 { …

我正在尝试制作一个底部有一个完整跨度行的网格。

对于全跨列，我可以使用grid-column: 1/-1.

对于单跨列，我可以使用grid-column: 1/1.

对于单跨行，我可以使用grid-row: 1/1.

但是如果我想定义最后一列或最后一行，我必须写grid-column: -2/-1.

为什么语法与第一列/行的 1/1 不同？还是我在某个地方犯了错误？

我还制作了一个 jsfiddle 来演示我的问题：jsfiddle

.grid-container {
  display: grid;
  grid-template-columns: 5px 1fr 1fr;
  grid-template-rows: minmax(50px, 2fr) 1fr 1fr 1fr 1fr 1fr 15px;
}

.grid-item {
  width: 1fr;
}

.header {
  display: flex;
  grid-column: 2/-1;
  grid-row: 1/1;
  justify-content: center;
}

.border-left {
  background: purple;
  grid-column: 1/1;
  grid-row: 1/-1;
}

.border-bottom {
  background: #410266;
  grid-column: 2/-1;
  /* grid-row: -2 / -1;  this will …

我有一个 CSS 网格，它的网格模板列设置为 grid-template-columns: repeat(auto-fit, minmax(225px, 1fr))

当我检查移动站点的响应能力时，网格元素只会变小并且不会堆叠。我试图让它们在移动设备上堆叠到 1fr 列中。我曾尝试使用媒体查询在断点处将网格模板列设置为 1fr，但没有奏效。

这是我所拥有的 CodePen 的链接https://codepen.io/Swildman/pen/ZEzqvXK

/* variables for colors */

:root {
  --highlight-color: #ff7264;
  --white-color: #fff;
  --text-color: #7f7f7f;
  --dark-bg-color: #2e2e2e;
  --light-bg-color: #fff;
  --gray-bg-color: #666;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* services section */

.services-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  grid-template-rows: repeat(3, 200px);
  grid-gap: 5px;
  margin: 5px;
}

.cell {
  background: var(--highlight-color);
  text-align: center;
  color: var(--white-color);
  padding: 10px;
}

.cell h3 {
  font-size: 20px; …

我试图以这样一种方式使用max-content选项，grid-template-columns即我的所有列都具有网格中最宽单元格的宽度。列数需要保持动态。

现在我有下面的 CSS 和 HTML。您可以看到只有第一列的宽度取决于我的网格中最宽的单元格（单元格 1）。因此，在所需的结果中，所有列都应具有单元格 1 的宽度。有人能告诉我如何获得具有动态列数和列宽的网格，该网格取决于网格中最大的单元格吗？

.container {
  width: 400px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max-content, 100px));
  grid-gap: 5px;
}

.item {
  background: yellow;
  border: 1px solid red;
}

<div class="container">
  <div class="item">1 I am a very very wide cell</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

我有一个用 CSS 网格创建的带有线条的标题。我希望线条更小（比如 5%）我怎样才能做到这一点？

HTML 和 CSS

h1 {
  display: grid;
  grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
  align-items: center;
  text-align: center;
  grid-gap: 20px;
  width: 100%;
  font-size: 3.4em;
  text-transform: uppercase;
  color: #000;
}

h1:before,
h1:after {
  content: '';
  border-top: 2px solid #ff3f3f;
}

<h1>Text</h1>

我有一个稍微假设的问题：

如果我有一个<ul>, 并且我想使用 css 网格<li>在垂直列表中显示，有没有办法自动执行此操作，以便如果<li>更改的数量，行数会自动增加/减少？

例子：

ul {
  display: grid;
  grid-template-rows: repeat(NUM, 1fr);
}

<ul>
  <li>item one</li>
  <li>item two</li>
  <li>item three</li>
</ul>

此处NUM指定模板中的行数，但如果我要添加另一个<li>，则必须更改NUM值。

有没有办法识别子元素的数量并相应地自动设置行数？

如果我错过了任何 cdd 网格规范，我假设性地询问， - 我不是在寻找任何黑客，特别是我不是在寻找 javascript 解决方法 - 似乎有点太不灵活了，无法自动执行此操作，我是网格的新手，只是想知道它是如何工作的。

According to the spec, the value for grid-area is grid-line, which further uses custom-ident. Then MDN states that identifies cannot be put between quotes, which will make it a string value, which by itself is reasonable.

But adding these all up, named grid areas must be accessed via an ID without quotes. See the comparison in the example below:

.grid {
    display:grid;
    grid: "a b" 1fr "c d" 1fr / 1fr 1fr;
}

.foo {
/* this works …

编辑：适用min-height: 0;于.svg-container修复容器大小，但在 Edge 中，svg 元素会溢出其容器。

我正在尝试将内联 SVG 元素缩放到其父容器的高度。父容器的大小使用 CSS 网格（我也尝试过 flex box）。

通过将元素max-height属性设置为100%. 然而，当在其他浏览器中查看时，SVG 似乎忽略了这个规则。

这些是我尝试过的浏览器：

• 谷歌浏览器：版本 80.0.3987.87（官方版本）（64 位）——这个有效
• Microsoft Edge：44.18362.449.0
• Firefox 开发者版：73.0b12（64 位）
• 火狐：72.0.2（64 位）

这是它在 Google Chrome 中的样子（预期结果）：

这是在 FFDE 中的样子（也在常规 FF 和 Edge 中）：

在body和html元素都具有一个规则height: 100vh;和其他所有孩子大小源自%或fr。

我非常感谢有关如何确保在容器使用 css grid 或 flex 时元素不超过其父容器的 100% 的任何指导，因为到目前为止我在其他线程中找到的解决方案都没有对我有用。

这是一个jsfiddle，下面我将包含代码。感谢您的时间。

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html,
    body …

我正在使用 Tailwind 的新 CSS 网格功能。它有Grid Column ，其中span 1/span 1包含 class col-span-1、span 2/ span 2for class等值，col-span-2直到span 12/span 12for class col-span-12。

然而，我无法span 1/ span 1在实践中理解。我能理解1 / span 1。我也能理解，span 1/ 3但似乎无法掌握span 1/ span 1。