我想将子级的元素放置到其父级的网格上。

一种方法是让孩子使用所有列，grid-column: 1/4然后使用与父母相同的规则。这将制作几行网格布局。所以最终的结果会很不协调。

.parent-wrapper {
  display: grid;
  grid-template-columns: auto auto auto;
}

.child-wrapper {
  /* make it inherit from parent  */
  /* so that it displays as..:    */
  /* Item A ... Item B ... Item C */
}

.child-wrapper-attempt {
  grid-column: 1/4;
  display: grid;
  grid-template-columns: auto auto auto;
}

<h3>Problem..</h3>
<div class="parent-wrapper">
  <div>Header A</div>
  <div>Header B</div>
  <div>Header C</div>
  <div class="child-wrapper">
    <div>Item A</div>
    <div>Item B</div>
    <div>Item C</div>
  </div>
</div>

<br>
I'd like to make it display as..
<p>Item …

尝试为我的应用程序导航栏设置 CSS 网格布局，但我无法让 justify-content 属性正常工作。在这里，我试图将其设置为中心，但我真正想要的是一种布局，其中装订线空间根据可用空间扩展。

问题的小提琴： https: //jsfiddle.net/epch33vx/

我的HTML：

<div class='test'>
  <div class='item'>
    1
  </div>
  <div class='item'>
    2
  </div>
  <div class='item'>
    3
  </div>
  <div class='item'>
    4
  </div>
</div>

我的样式表：

.test {
  display: grid;
  grid-template-columns: repeat(4, minmax(56px, 80px));
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  justify-items: center;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 56px;
  font-size: 14px;
  text-decoration: none;
}

我有一个简单的用例：项目标题和描述。标题应出现在说明上方，我希望标题确定整个列的宽度，也适用于“说明”行。

CSS 网格可以实现这一点吗？如果可以，如何实现？

这是所需的输出：

这就是代码，基本上是：

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
}

<div class="grid-container">
  <div class="A">
    DIV A contains the TITLE
  </div>
  <div class="B">
    DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping)
  </div>
</div>

我正在尝试弄清楚 CSS 网格是否能够像表格一样运行。

因此，如果我有很长的“单元格数据”（第 2 列），并且表中其他地方有可用空间，我不希望它像下图中那样换行：

我想要实现的就是这样的事情。具有较长内容的列会增长，而其他列会根据该列中的内容而缩小。

我在 CodePen 上上传了一个示例： https: //codepen.io/anon/pen/WdNJdY

.wrapper {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  background-color: #fff;
  color: #444;
  max-width: 800px;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

<div class="wrapper">
  <div class="box a">col 1</div>
  <div class="box b">col 2</div>
  <div class="box c">col 3</div>
  <div class="box d">short data</div>
  <div class="box e">a really long piece of data</div>
  <div class="box f">short data</div>
</div>

我对 CSS 网格非常陌生，所以我很好奇这是否可能。

任何帮助表示赞赏。提前致谢！

我正在 CodePen 中创建一个基本的 Web 布局，以更好地了解网格区域如何与 CSS 网格模块配合使用。事实证明，.当应用于属性时，使用符号实际上并不会“隐藏”项目grid-template-areas。

请在此处查看我的代码： https: //codepen.io/isaacasante/pen/KZmyKV

您可以看到我将菜单下方的网格单元保留为空，但section我添加的元素grid-area: random仍然显示在布局的右下角（页脚下方）。

你们知道如何在不删除 HTML 的情况下摆脱它吗？我只想使用网格区域来隐藏它。我注意到一个简单的解决方案是将元素上的填充设置section为 0，但这不是一个好的解决方案，因为下次我尝试“隐藏”具有内容的元素时它将不起作用。

第一张图片应该占据 3/4 或 2 列的可用空间，其余两张图片将垂直位于最后一列的右侧。

<div class="wrapper1">
<div class="one">
  <img  width="1200px"height="500" src="https://images.unsplash.com/photo-1459666644539-a9755287d6b0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=279b60ab483a2610d1e7260dc213898c&auto=format&fit=crop&w=828&q=80" alt="pic1">
  </div>


<div class="two">
  <img height="300px" width="600px" src="https://images.unsplash.com/photo-1508182314998-3bd49473002f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=af394daae4bdbc4a95dc2204984b790d&auto=format&fit=crop&w=1350&q=80" alt="pic2">
  </div>
<div class="three">
  <img  height="300px" width="600px"src="https://images.unsplash.com/photo-1516703914899-e8303d01329a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b544282e40e1ddee968dac7188ae9a3e&auto=format&fit=crop&w=1350&q=80" alt="pic3">
  </div>

</div>

/* 这是 CSS 样式 */

.wrapper1{
          display:grid;
          grid-column-gap:1px;
          grid-template-columns:repeat(3,1fr);
          grid-template-rows: 200px; 

        }

        .one{
         grid-column:1/3;

        grid-row: 1;

        }

        .two{
          grid-column: 3;
          grid-row:1;   

        }
        .three{
         grid-column:3;
          grid-row:2;
        }
        .wrapper2{
          display: grid;

        }

使用 Flexbox 或 CSS Grid，是否可以根据其中一列的内容来调整我的列的大小？

这里\xe2\x80\x99s我想要的：

我有 2 根柱子，一根主柱和一根侧柱。

|------------------------container--------------------------|\n|                                                           |\n||----------------------------------------|----------------||\n||               main                     |      side      ||\n||----------------------------------------|----------------||\n|                                                           |\n|-----------------------------------------------------------|\n

我希望side能够根据其内容自动调整大小，并且我希望main 的宽度至少是side 的两倍。它可以变大，但不能变小。

随着容器的增加，主容器将以相同的速率增长，而侧面保持其自动宽度。

|--------------------------container increases----------------------|\n|                                                                   |\n||------------------------------------------------|----------------||\n||                   main increases               |      side      ||\n||------------------------------------------------|----------------||\n|                                                                   |\n|-------------------------------------------------------------------|\n

容器可以缩小到侧面的 3 倍，此时主容器的宽度将是侧面的两倍。我希望这是断点。

|--------------------container----------------------|\n|                                                   |\n||--------------------------------|----------------||\n||               main             |      side      ||\n||--------------------------------|----------------||\n|                                                   |\n|---------------------------------------------------|\n

如果容器进一步缩小，我希望将列堆叠起来，其中两列现在都是 100% 宽度：

|--------------------container--------------------|\n|                                                 |\n||-----------------------------------------------||\n||               main                            ||\n||-----------------------------------------------||\n||-----------------------------------------------||\n||                           side                ||\n||-----------------------------------------------||\n|                                                 |\n|-------------------------------------------------|\n

这里\xe2\x80\x99s我尝试过的\xe2\x80\x99：

如何使网格中的单元格仅与其 一样宽max-content，但永远不会溢出父网格容器？

检查这个例子：

.grid {
  border: 1px dotted blue;
  display: grid;
  gap: 5px;
  grid-template-columns: min-content max-content;
  width: 120px;
}

label {
  background-color: yellow;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="grid">
  <input type="checkbox" id="foo" /><label for="foo">foo label, must not overflow parent grid!</label>
</div>

<div class="grid">
  <input type="checkbox" id="bar" /><label for="bar">bar label</label>
</div>

代码示例还展示了我的真实用例。我需要它，所以标签仅限于父元素，同时也不能比必要的更宽，因为我不希望标签右侧的空白成为可点击区域的一部分。

如果我将其设置为1fr而不是max-content，则标签会覆盖容器的整个其余部分，这是不需要的，因为现在您可以单击标签右侧的空白来切换复选框。

.grid {
  border: 1px dotted blue;
  display: grid;
  gap: 5px;
  grid-template-columns: min-content 1fr;
  width: 120px;
}

label {
  background-color: …

我是编程新手（使用在线课程学习）

我只是在测试并获得对 CSS 的“感觉”，我现在已经用了 2 天时间来尝试理解 CSS 网格，但是我在尝试解决这个小问题时遇到了困难。

首先，使用 CSS 进行布局有不同的方法，有推荐的方法吗？grid 是要走的路，还是 flex？

我正在尝试为我的一个项目设计登录表单，我快到了，但我不知道如何将复选框从一列移动到另一列。

图片显示我的意思。

我的 HTML：

.grid-container {
  display: grid;
  padding: 1em;
  justify-content: center;
  align-content: center;
}

form {
  background: #2DA1A8;
  padding: 2em;
  display: grid;
  grid-template-columns: auto auto;
}

<body>
<div class="grid-container">
    <form action="">
        <label for="username" class="user-name">Brukernavn</label>
        <input type="text" class="username">

        <label for="password" class="pass-word">Passord</label>
        <input type="password" class="password">

        <button class="login">Logg inn</button>

        <label for="rpass" class="rem-pass">Husk passord</label>

        <input type="checkbox" class="remember">
        <label for="fpass" class="forgot">Glemt <a href="#">passord?</a></label>
      </form>
</div>  
</body>

我刚开始使用网格布局，并注意到它在相同的视口大小上呈现不同：

(1) 最大化窗口中的初始显示，这里没什么特别的：

(2) 使用调整浏览器窗口大小后 按钮左侧边栏中的文本被包裹：

(3) 刷新浏览器窗口而不改变其大小后，去掉左侧边栏中的换行： 请注意左侧边栏中的文本如何突然不再换行，而视口大小仍然相同！

怎么可能？我在 Windows 上使用 Chrome 89.0.4389.82（最新稳定版）。使用 Firefox 86 我也有奇怪的调整大小效果（在小窗口上包装文本，并且在最大化时包装不会被删除）。想知道两个主要浏览器在简单网格上会出现错误吗？我做错了什么/遗漏了什么？

使用的 CSS/HTML：

<style type="text/css">
  body {
    height: 100vh;
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: auto minmax(0, 1fr);
  }

  header {
    background-color: #add790;
    text-align: center;
    grid-column: span 2;
  }

  nav {
    background-color: orange;
    overflow: auto;
    padding: 1em;
  }

  article {
    overflow: auto;
    padding: 1em;
  }
</style>

<header>
  <h1>Title</h1>
</header>
<nav>
  <p>Navigation</p>
  <p>Some text.</p>
  <p>Some text.</p>
  <p>Some text.</p>
  <p>Some text.</p>
  <p>Some text.</p> …