标签: css-grid

我正在尝试以简历样式创建网格模板。

基本上，我有一个包含 2 列 1 fr 和 3fr 的网格。

1fr 具有该部分的标题，而 3fr 具有所有内容。在 3fr 部分中，我正在添加工作经验，并将其布局以便有 2 列具有 display: flex 属性

每个都在一个带有 div 的部分中。

现在，当我添加第一个工作时看起来不错，但随后我添加了第二个工作，并将其分层在第一个工作之上，依此类推。我希望他们在该部分中基本上处于各自的行中。

我如何才能使它们不会相互堆叠，而是整齐地一个接一个地放置？

我需要在该网格行内制作另一个网格吗？

任何帮助都会很棒，请在下面查看我的 Codepen（这只是一个片段，请参阅下面的完整 codepen）

简历编码笔

.container {
  display: grid;
  max-width: 82em;
  max-height: auto;
  margin: auto;
  grid-template-areas: "head head"
                       "nav nav"
                       "about about-info"
                       "work work-info"
                       "education education-info"
                       "skills skills-info"
                       "footer footer";
  grid-template-rows: 300px 50px 12.50em 31em 500px 500px 50px;
  grid-template-columns: 1fr 3fr;
  grid-gap: .075em;
  background-color: white;
}

.work-info {
  border: 1px solid black;
  grid-area: work-info;
  display: …

这是可能的“偏移”一个div在CSS网格的图像中？

是否可以像 css 中的弹性项目一样缩小网格项目？

网格项目

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

.child {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 3px solid #a07;
}

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

提琴手

弹性项目

.container {
  display: flex;
  margin-left: -10px;
  flex-flow: row wrap;
}

.child {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  padding: …

是否可以为 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>

我有一个用 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 …