标签: css-grid

我有一个弹性盒问题.谁能指出我正确的方向？甚至可能是因为它的工作方式,flex-box无法解决这种情况.

1. 我想在4列中显示内容.

2. 让内容以列式格式列出,并在空间不足时换行到下一列.

   display: flex; 
   flex-direction: column; 
   flex-wrap: wrap; 
   height:<##>px
   

   Run Code Online (Sandbox Code Playgroud)

   应该照顾好这个.

   但这就是事情变得棘手的地方.如果我不想要一个固定的高度,但是根据内容的长度增长/缩小的高度怎么办？

   

3. 容器的高度是动态的.与案例B​​类似,案例A中的行从4行增长到7行.内容设置为尽可能填充所有列.

.other-nearby-cities {
  display: flex;
  flex-direction: column;
  height: 700px;
  flex-wrap: wrap;
  border: solid 1px;
}

<ul class="other-nearby-cities">
  <li><span class="capitalize">Altamonte Springs</span><span> (5)</span></li>
  <li><span class="capitalize">Apopka</span><span> (11)</span></li>
  <li><span class="capitalize">Arcadia</span><span> (11)</span></li>
  <li><span class="capitalize">Auburndale</span><span> (5)</span></li>
  <li><span class="capitalize">Belle Glade</span><span> (10)</span></li>
  <li><span class="capitalize">Boca Raton</span><span> (33)</span></li>
  <li><span class="capitalize">Bonita Springs</span><span> (10)</span></li>
  <li><span class="capitalize">Boynton Beach</span><span> (21)</span></li>
  <li><span class="capitalize">Bradenton</span><span> (46)</span></li>
  <li><span class="capitalize">Brandon</span><span> (16)</span></li>
  <li><span class="capitalize">Brooksville</span><span> (8)</span></li>
  <li><span class="capitalize">Cape Coral</span><span> (17)</span></li>
  <li><span class="capitalize">Clearwater</span><span> (90)</span></li>
  <li><span class="capitalize">Clewiston</span><span> (9)</span></li>
  <li><span class="capitalize">Cocoa</span><span> …

无法弄清楚为什么CSS网格布局会为垂直单元格周围的内容添加不必要的额外空间,尽管边距和填充被清零:

.grid {
  display: grid;
  grid-template-columns: 13fr 11fr 4fr 20fr;
  grid-auto-rows: 12fr;
  grid-gap: 4px;
  align-items: center;
}

.grid figure {
  outline: 1px solid red;
  margin: 0;
  padding: 0;
}

.grid figure img {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
}

.grid .gi13x12 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 13;
}

.grid .gi11x6.one {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 7;
}

.grid .gi11x6.two {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 7;
  grid-row-end: 13;
}

.grid .gi4x4.one …

我正在编写我想要使用CSS网格的第一页display: grid.

它工作得非常好,但我遇到了一个小问题,我想要一个float经典的元素- 文本浮动图像,报价等.

我简单地给了一个元素float: left,令我惊讶的float是,它完全被忽略了.该元素仍然是一个完整的"网格行项目".

短代码示例:

main {
  display: grid;
  grid-template-columns: 5% 5% 1fr 5% 5%;
}

main > * {
  grid-column: 3;
}

blockquote {
  grid-column: 2 / -2;
}

blockquote.float-left {
  grid-column: 3;
  float: left;
}

更大的例子,我创建了一个Codepen.

不幸的是,我还没有发现任何相关信息,所以我的问题是:有没有人为此解决问题？我忽略了什么吗？或许那可能还不可能？

先感谢您!:)

Codepen - 链接:

https://codepen.io/anon/pen/GQWPWX

我觉得我在这一点上缺少一些东西,因为我观察到的行为并不完全一致.

我正在使用JavaScript生成随机网格.我在网格上设置了许多列和行,然后分别设置单元格的起始值和结束值.我想要的是,当溢出时(即,单元格的内容高于我想要的最小值,50px),单元格会增长,同一行上的单元格也会增长.看到这个小提琴

我在这里使用

grid-template-rows: repeat(4, minmax(50px, auto));

但是,正如您所看到的,由于某种原因,只有第3行增长而不是第4行.这可以通过将该行设置为来修复

grid-template-rows: repeat(4, minmax(50px, 1fr));

但这会导致所有行在发生溢出时均匀增长,这不是我想要的.看到这个小提琴

另外,奇怪的是,当我溢出第6个单元而不是第4个单元时,它确实有效.看到这个小提琴.第2和第3行均匀生长,因为第6行占据了两者.这也是我在第一个例子中期望和想要的行为.

这是一个错误吗？在Chrome和Firefox上也是如此,所以我觉得我只是遗漏了一些东西.

我正在尝试创建由正方形组成的网格/布局.每行四个方格.正方形不能在屏幕大小调整上扭曲.宽度和高度必须始终相同(我不想要固定值).我必须使用CSS网格.谁能帮我 ？

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
}

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

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

基本上，我有一个包含 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: …

CSS 网格位于具有以下内容的页面上max-width：

body {
  outline: 1px solid black;
}

.max-width {
  max-width: 400px;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.first-grid-item {
  grid-column: 1 / -1;
  background-color: #ccc;
}

.second-grid-item {
  grid-column: 1 / -1;
  background-color: tomato;
}

@media (min-width: 576px) {
  .max-width {
    max-width: 500px;
  }
  .first-grid-item {
    grid-column: 1 / 9;
  }
  .second-grid-item {
    grid-column: 9 / 13;
  }
}

<div class="max-width">
  <div class="grid">
    <div class="first-grid-item">First</div>
    <div class="second-grid-item">Second</div>
  </div>
</div>

在较小的屏幕上，布局会发生变化，第二个网格项位于第一个下方： …

我有一个 CSS 网格，但我发现网格行并不都适合页面 - 相反，它们会导致溢出。如何调整网格行的大小，以免它们溢出页面？我认为该1fr值应该这样做，但它似乎在我的代码中不起作用。

我已经查看了防止内容扩展网格项目并尝试了那里的建议答案（例如更改grid-template-rows: repeat(5, 1fr)为grid-template-rows: repeat(5, minmax(0, 1fr));但无济于事。

我试过添加height: 100%到网格中，它是容器，但它仍然溢出。

JsFiddle https://jsfiddle.net/4g9b2qkL/

body,
html {
  margin: 0;
  height: 100%;
}

#container {
  display: grid;
  grid-template-columns: 1fr 5fr;
  height: 100%;
}

#left {
  grid-column: 1 / 2;
  background: lightblue;
  height: 100%;
}

#right {
  grid-column: 2 / 3;
  height: 100%;
}

#results {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  height: 100%;
}

img {
  max-height: 100%;
  max-width: 100%;
} …

我一直在尝试在 CSS Grid 上使用下图，但结果非常具有挑战性

该图像代表一个体育场，但很难使它看起来像所附的图像。几点考虑

• 角是三角形，所以最难的部分是使它们具有那种形状并且响应迅速。

• 我可以使用 CSS Mask 来处理形状和间距，但这会切断几个圆圈。

我做了我的尝试，错误和错误，并成功了一半。知道如何使它工作吗？或者如果有人有不同的方法也会帮助我

https://jsfiddle.net/rodboc/9psa4bg3/1/

有什么想法吗？

.grid {
  max-width: 80vw;
  min-height: 90vh;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 30% [main-start] 40% [main-end] 30%;
  grid-template-rows: 20% [main-start] 30% [main-end] 20%;
  margin: 0 auto;
}

[class^="item"] {
  background-color: blue;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
}

.item1 {
  background-color: red;
  grid-area: main;
}
.circle {
  width: 5px;
  height: 5px;
  overflow: hidden;
  background: #ccc;
  border-radius: 50%;
  margin: 1px;
  padding: 0;
} …

我需要将中间的网格项保持为空。我认为使用以下属性是可能的：grid-template-areas

grid-template-areas:
  "header . header"
  "main . ."
  "footer . footer";

但不幸的是，这并没有给出正确的显示。

所以我使用了 5 个名为 item-a 到 item-e 的类，然后在 css 中设置了网格中的正确位置。然而，这感觉不是一种非常有效的方法。有谁知道如何使它更有效？

grid-template-areas:
  "header . header"
  "main . ."
  "footer . footer";

.content-container {
    width: 51.5em;
    height: 30em;
    padding: 2.125em 1.5em;
    display: grid;
    grid-template-columns: 45% auto 45%;
    grid-template-rows: auto;
  }

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

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

  .item-c {
    grid-column: 1;
    grid-row: 2 / 3;
  }

  .item-d {
    grid-column: …