标签: css-grid

是否可以为 grid-template-columns 属性设置动画？我正在构建技术文档的布局，在网格的第一列中您可以看到不同错误的描述，在第二列中可以看到相关技术内容的超链接。

按下按钮，使用 javascript 超链接容器将消失并将网格的列号更改为 1。

它正在工作，但效果是快速效果，我的目标是缓出幻灯片效果。

css：

.content-grid-rc {
    display: grid;
    grid-template-columns: auto 350px;
    grid-template-rows: auto auto;
    grid-template-areas: "a b"
                     "c c";
    transition: all 1s;

}

javascript:

    function hideLinks(){
    let x = document.getElementsByClassName("card");
        for(let i = 0; i < x.length; i++){
            x[i].style.display = "none";
            document.getElementById("content-grid-rc").style.gridTemplateColumns = "100% 0%";
        }
    }

非常感谢您的提示！

我开始使用 CSS Grid，我一直在阅读有关有助于响应的属性；所以我正在尝试构建一个包含 6 个元素的小网格；我的目的是让它们在较大的设备上显示为 2 行，如下所示：

并且为了将它们全部显示在较小的设备上，所以对于较小的设备来说一切都很好，我正在使用auto-fill它以保持响应，但是如果我在笔记本电脑屏幕或台式机上查看页面，它能够再填充一列最终看起来像这样：

这是我的grid布局代码。

display: grid;
grid-template-columns: repeat(auto-fill, 260px);
justify-content: center;
row-gap: 18px;
column-gap: 18px;

有没有办法保持响应行为但也设置最大列数？任何帮助表示赞赏；如果它只能通过媒体查询来完成，那很好，但我首先尝试寻找不使用它们的方法。此外，我通过padding为整个网格容器设置水平以补偿附加列的大小，使其按预期工作；但同样，如果有更好的方法，我会全神贯注。谢谢！

工作示例 https://codepen.io/IvanS95/pen/NEYdxb

我为对话场景构建了一个 CSS 网格。我使用的max-content功能grid-template-columns来确保最长的扬声器名称定义左列的宽度。

问题是.stage-director没有扬声器名称的列。在当前设置下，舞台导演的声明定义了左列的最大内容，这毫无意义。

有没有办法忽略- 计算的.dd.statement.stage-director内容max-content？

dl {
  display: grid;
  grid-template-columns: max-content auto;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
}

dt,
dd {
  margin: 0;
  padding: 0;
}

.speaker.stage-director {
  display: none;
}

.statement.stage-director {
  grid-column: span 2;
}

<dl>
  <dt class="speaker">ROMEO</dt>
  <dd class="statement">What, shall this speech be spoke for our excuse? Or shall we on without a apology?</dd>

  <dt class="speaker stage-director"></dt>
  <dd class="statement stage-director">This is a long statement of the stage …

我今天刚开始学习 CSS 网格，我可以开始看到使用这个很棒的 css 类的意义。但真正让我困惑的一件事是如何在移动设备上重新组织网格。

我在这里做了一个例子。这是在桌面视图上应该如何工作。当屏幕尺寸低于 991px 时。我希望网格看起来像这样：

但是我应该如何使用 CSS 网格来控制它？

.wrapper {
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  grid-auto-rows:minmax(100px,auto);
  grid-gap:1em;
}	

.wrapper > div {
  background-color: #eee;
  padding: 1em;
}
.wrapper > div:nth-child(odd) {
  background-color: #ddd;
}

.box1 {
  grid-column:1/3;
  grid-row:1/3;
}

.box2 {
  grid-column:3;
}

.box3 {
  grid-column:3;
}

<div class="wrapper">
  	<div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
</div>

我有一个简单的页面，我想要一个粘性标题和一个粘性侧边栏。这是一个小提琴，这是相同的代码：

#top {
  position: sticky;
  top: 0;
  border: 1px solid red;
  width: 100%;
}

.container {
  display: grid;
  grid-gap: 50px;
  grid-template-columns: max-content 1fr;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
}

.sidebar {
  border: 1px solid blue;
  position: sticky;
  top: 0;
}

.content {
  border: 1px solid green;
}

<div id="top">
  sticky header
</div>
<div class="container">
  <div class="sidebar">
    sticky sidebar
  </div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at ipsum mi. Integer …

我设置了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; …

我注意到带有边距自动（显示网格的子项）的元素的位置有些闪烁。

我已经隔离了这个问题，请看下面的代码。

我知道我可以用不同的方法将元素居中，但这个方法应该有效。我到处搜索，但找不到任何有同样问题的人，但我在另一台计算机上尝试过，它具有相同的行为。

我希望红色框只是居中在父元素的中间，而不是在调整大小时闪烁

section {
  display: grid;
}

div {
  width: 200px;
  height: 200px;
  background: red;
  margin: auto;
}

<section>
  <div></div>
</section>