标签: css-grid

有人可以帮我弄清楚为什么以下CSS Grid示例无法按预期工作吗？这是Codepen的链接：

.cards {
  margin: 0;
  padding: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  grid-template-areas:
    "a a b"
    "c d d"
    "c e e";
}

.card {
  background-color: #1E88E5;
  padding: 2em;
  color: #FFFFFF;
  line-height: 1.4;
  border-radius: 4px;
}

.card1 { grid-area: "a"; }
.card2 { grid-area: "b"; background-color: #4CAF50; }
.card3 { grid-area: "c"; background-color: #FFCA28; }
.card4 { grid-area: "d"; background-color: #F06292; }
.card5 { grid-area: "e"; background-color: #FF8A80; }

由于某种原因，网格区域的结构不正确。可能我忘记了一些东西，但我无法弄清楚到底是什么。任何帮助表示赞赏。谢谢！

I have a grid with 3 rows, 1 column and item of the middle row is a grid itself of 2 columns and 4 rows.

CSS Snippet

.css-grid-container-common-styles{
    height:100vh; /*???*/
    display: grid;
    grid-template-columns: 1fr;  /* 1column*/
    grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaininign is divided into 2 rows, middle row is 15 times larger than the 3rd row.*/
}

HTML Snippet

<div class="css-grid-container-common-styles"> <!-- first container -->
<nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item-nav-div-common-styles"> <!-- …

我有一个 CSS 网格布局，其中我有一些跨越多个网格轨道的网格项目。

当窗口低于 1024px 时，我想更改布局。

在这个例子中，.grid-item-5目前跨越 3 个轨道，我希望它低于 1024px，这个视觉元素从 '.grid-item-4 开始并跨越整行 - 这很简单，因为我会做以下事情：

@media screen
and (max-width: 1024px) {
    .grid-item-4 {
        grid-column: 1 / 8;
        background: lightblue;
    } 
}

问题：

我.grid-item-5到底如何关闭初始值，以便它们恢复为默认值（即，项目 5 不跨越任何其他网格列），从而不会破坏布局？

非常感谢，

@media screen
and (max-width: 1024px) {
    .grid-item-4 {
        grid-column: 1 / 8;
        background: lightblue;
    } 
}

body {
    margin: 0; padding: 0;
    width: 100%;
}

#grid-wrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 10rem);
    grid-gap: 1px;
}

.grid-item {
    background: …

flexbox 和 grid 系统有什么区别？我应该在什么情况下使用每个系统？

大家好，我找不到任何帮助示例，因为我从未使用过 CSS 网格，无论如何，我将如何用下一个元素填充网格中的空白空间？我的1fr元素不适合之前的可用空间。是因为我将班级高度加倍还是什么？就像我说过的，我从未使用过 CSS 网格，但我现在只需要它们，这是我添加到代码中的最后一件事，你们能帮我吗？

#container {
  width: 40%;
  margin-left: 20%;
  margin-bottom: 1rem;
  display: grid;
  float: left;
  grid-template-columns: auto;
}

#container>div:nth-child(1) {
  margin-top: 0 !important;
}

.content-1x,
.content-2x,
.content-3x {
  margin: 1rem 1rem 0 0;
  height: 15rem;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.double-height {
  height: 30rem;
}

.content-3x {
  grid-area: auto / auto / auto / span 3;
}

.content-2x {
  grid-area: auto / auto / auto / span 2;
}

.content-1x {
  grid-area: …

我想知道是否有一种方法可以在不使用 JavaScript 的情况下将动态数量的行和列分配给网格布局？我见过的每个示例都包含一些 Javascript，到目前为止，我仅了解 HTML 和 CSS（学生）。我想要实现的是，当我添加内容时，我不想在 CSS 中创建新行。我也不知道是否可能，但如果我可以仅重复两行作为基本布局，那就太好了，我希望在行之间交替颜色，并且除了使用它们来放置其他内容之外没有其他属性。

编辑：

好吧，我尝试建立一个网格

<div class="grid-container"></div>
<div class="grid-item1"></div>
<div class="grid-item2"></div>
<div class="grid-item3"></div>...

这种方式的问题是我必须为我想要的每一行或每一列手动添加一个新的网格项。我在重复中找到了部分解决方案。

.grid-container {
grid-template-rows: repeat(20, 10px);
}

但我不确定这是否意味着当我用完行时我将留下滚动的白色区域并且我将不得不更改我的CSS，这是我所期望的，或者我是否只需要返回手动添加新的网格项目。我正在尝试找到一种方法来指定我的 CSS 文件，生成未知数量的行，以便在添加内容时，我不必手动添加网格项。

我正在尝试掌握 CSS Grid，这是从以前使用我习惯的 Bootstrap 的过渡。

我创建了一个简单的布局（4 行和 6 列），但是底部有一个不需要的空白，导致可见的滚动。

有没有办法在不为 .container 元素设置确切高度的情况下解决这个问题？当我将高度设置为 .container (height: 500px) 时，问题就消失了。这是绕过它的方法吗？我不想使用可能在较小或较大视口上导致问题的快速修复。

.grid{
  display: grid;
  position: relative;
  margin: auto;
  grid-template-areas:
    "nav nav nav nav nav nav"
    "logo logo logo logo logo logo"
    "main main main main main side"
    "footer footer footer footer footer footer";

  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 50px 1fr 1fr;
}
.nav{
  grid-area: nav;
  background-color:green;
}
.logo{
  grid-area: logo;
  background-color:salmon;
}
.main{
  grid-area: main;
  background-color:cadetblue;
  min-height: 800px;
  height: auto;
}
.side{
  grid-area: side;
  background-color:lightpink; …

我制作了一个响应式网站，当我重新调整浏览器大小时效果很好，但是该网站不能只在智能手机上运行，​​只有当我添加@media 时它才不能在移动浏览器上运行

我的CSS：

.Footer {
background: #222;
color: #fff;
padding: 2px;
align-items: center;
text-align: center;


@media(min-width: 600px) {
.Footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
}

我正在学习 css-grid 并且在使用网格区域和百分比大小的行/列时遇到了跨浏览器（Firefox 和 Chrome）渲染差异。在此处查看我对此问题的演示：https : //codepen.io/anon/pen/qQyKNO

请参阅下面包含 HTML/CSS 的 MVCE：

/* CSS Reset */
html 
{
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust:     100%;
}
body { margin: 0; }
.p1  { padding: 1rem; }
img  { display: block; border: 0; width: 100%; height: auto; }

/* General Styles */
.navbar       { background: white; border-bottom: 1px solid black; }
.logo         { background: #212121;}
.sidebar      { background: #212121; color: white; }
.main-content { background: white; }
.colophon     { background: #1c1e1e; color: …

在 WordPress 主题“Hestia”的免费版本中，您无法更改首页上各部分的顺序。有一些自定义的 PHP 片段允许您更改顺序，但它们非常复杂。