与我合作的设计师定期提交设计，其中页面中会有多个表格，通常由段落或中间的其他内容分隔。他更喜欢每个表的列具有相同的宽度。这是一个例子...

Employees
--------------------------------------------------------
| Name                          | Start Date           |
--------------------------------------------------------
| Bill                          | 10/22/1983           |
--------------------------------------------------------
| Jim                           | 04/14/2010           |
--------------------------------------------------------
| Jessica                       | 06/08/2002           |
--------------------------------------------------------

Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.

Lunch Menu
--------------------------------------------------------
| Name                          | Price                |
--------------------------------------------------------
| Pizza Slice                   | $2.50                |
--------------------------------------------------------
| Pulled Pork Sandwich          | $5.99                |
--------------------------------------------------------
| Fried Chicken Dinner          | $7.99                |
--------------------------------------------------------

我的希望是找到一个可重用的仅 …

我正在尝试更多地使用网格，但我不能\xe2\x80\x99t 弄清楚什么应该是一个简单的问题。如何将所有元素放在一行中？

也就是说，我想模拟flex单行的布局。

我知道我可以在下面的示例中使用grid-template-columns: 1fr 1fr 1fr 1fr;，但我不想设置特定的列数。

div#flex {\r\n  display: flex;\r\n  flex-direction: row; /* I know that\xe2\x80\x99s not necessary */\r\n}\r\ndiv#flex>button {\r\n  flex: 1;\r\n}\r\n\r\ndiv#grid {\r\n  display: grid;\r\n  grid-template-rows: 1fr;\r\n}\r\ndiv#grid>button {\r\n\r\n}

<div id="flex">\r\n  <button>One</button>\r\n  <button>Two</button>\r\n  <button>Three</button>\r\n  <button>Four</button>\r\n</div>\r\n\r\n<div id="grid">\r\n  <button>One</button>\r\n  <button>Two</button>\r\n  <button>Three</button>\r\n  <button>Four</button>\r\n</div>

\n

我希望每个按钮保留其独特的宽度（当前基于文本宽度），并且当水平方向没有更多空间时，按钮会自动放置在下一行中。

使用grid-auto-flow: column允许按钮保留其宽度，但随后它们不会换行。使用 grid-template-columns: repeat(auto-fill, minmax(1rem, 15rem))允许它们换行，但随后它们会失去各自的宽度。

Codesandbox：https://codesandbox.io/s/jovial-shannon-btp3x?file=/ src/styles.css

.grid {
  margin-top: 1rem;
  margin-left: 0.1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(1rem, 11.3rem));
  max-width: 100%;
  grid-row-gap: 2.5rem;
  grid-column-gap: 2.5rem;
}

.button {
  padding: 1rem;
  outline: 1px solid rgba(110, 110, 110, 0.34);
  color: white;
  background-color: #1d1f1f;
  font-family: Calibri;
  font-size: 1.4rem;
  font-weight: bold;
}

<div class="grid">
  <button class="button">
        <span class="button-text">
          ab
        </span>
      </button>
  <button class="button">
        <span class="button-text">
          abcd
        </span>
      </button>
  <button class="button">
        <span class="button-text">
          abcdefg
        </span>
      </button>
  <button class="button">
        <span …

是否可以使用 CSS 网格将每隔一行向右对齐并每隔一行向左对齐？数量.item未知。

这是 HTML/CSS：

.container {
  grid-template-columns: repeat(4, 1fr);
}

<ul class="container">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <!-- ... -->
</ul>

预期解决方案：

我也对 CSS 网格之外的其他解决方案持开放态度。

我正在尝试使用 CSS 网格来实现这种布局。

图片：

这是我到目前为止所拥有的：

#wrapper {\r\n    display: grid;\r\n    gap: 20px;\r\n    grid-template-columns: auto 300px 1fr 1fr 180px auto;\r\n    grid-template-rows: auto;\r\n    grid-template-areas: \r\n    "logo nav-primary nav-primary nav-primary nav-primary search"\r\n    "nav-secondary nav-secondary nav-secondary nav-secondary nav-secondary nav-secondary"\r\n    "aside-1 aside-1 article article aside-2 aside-2"\r\n    "footer footer footer footer footer footer";\r\n}\r\n\r\n/* Article: use up remaining width */\r\n#article{\r\n    grid-area: article;\r\n}\r\n\r\n/* Logo: use up a little width as possible */\r\n#logo{\r\n    grid-area: logo;\r\n}\r\n\r\n/* Nav Primary: use up remaining width */\r\n#nav-primary{\r\n    grid-area: nav-primary;\r\n}\r\n\r\n/* …

我有一个包含 3 个按钮的列表，我试图在网格中显示。

按钮的文本是动态的，可以是一个单词或一个完整的句子。

我希望每个按钮的宽度通过其内容来确定。如果是长句子，则使其变宽；如果是 1 个单词，则使其变小。例子：

在较大的屏幕上，我希望它们像上面一样显示在 1 行中。在较小的屏幕上，如果没有足够的宽度来将所有内容显示在一行中，我希望它将内容移动到下一行：

我一直在努力让它工作，因为每当我在容器上设置网格时，按钮都会水平拉伸以填充所有空间。或者，它们被移动到每行 1 个按钮，并且仍然一直水平拉伸。

我已经尝试过min-width对所有内容进行设置，我已经尝试过auto-fill/auto-fit以及所有不同justify的align属性，但没有给我带来我想要的结果。

现在对我有用的解决方案是不使用任何网格，只在按钮本身上设置顶部和右侧的边距，然后它们按照我想要的方式对齐。但我觉得这应该可以通过网格来实现。

这是可能的还是不使用网格的更好解决方案？

问题

问题

• 即使 html 文件不是静态的（动态数量的复选框，...），布局也能正常工作。
• 良好的浏览器支持（如果edgeHTML 15支持该解决方案则加分）
• 字段集保留在 DOM 中，因为删除它们会产生副作用（单选按钮将不会分组，复选框和单选按钮将不再被禁用，...）
• 首选：无需更改 html 文件
• 首选：仅 HTML 和 CSS

如果 3 列设计无法做到这一点，则 2 列设计将是一种可能的替代方案。

基础

所以基本上我有一个这样的表格：

<form>
  <h2>A title</h2>
  <label>
    Some text input
    <input type="text">
  </label>
  <label>
    Some more text
    <textarea></textarea>
  </label>
  <fieldset>
    <legend>Some options</legend>
    <label>
      <input type="checkbox">
      1
    </label>
    <label>
      <input type="checkbox">
      2
    </label>
    <label>
      <input type="checkbox">
      3
    </label>
  </fieldset>
</form>

并希望得到这样的布局：

    +----------------+----------------+------------------------ ------+
    | 标题|
    +----------------+----------------+------------------------ ------+
    | 一些文字输入 | ( ) |
    +----------------+----------------+------------------------ ------+
    | 更多文字| …

一般来说，我习惯于引导前端设计。大约半年以来，我一直在使用 css 网格布局。我没有像以前那样遇到任何问题或者我不这么认为

我读了一些文章来了解 grid-row: 1 / -1 到底是如何工作的或者它的行为..也许我会跳过它...也许这是一个坏问题或者已经在这里回答了

.grid-container > div.item span { grid-row: 1 / -1 ; not working }不工作...

笔记：

1. grid-row: 1 / span number.. 不能解决问题。（段落标签数量未定义）。
2. 如果我写 grid-row: 1 / 99999 .. 更高的数字。它会解决我的问题..也许这是不好的做法...
3. 网格行：1 / -1。不工作...

需要对其行为的清晰解释或可靠的源文档

.grid-container {
  display: grid;
  grid-template-columns: repeat(2,1fr)  ;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
  animation: mymove 5s infinite;
}

.grid-container > div.item {
   display: grid;
  grid-template-columns: max-content 1fr ;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: …

我已经设置了一个网格模板，但前端模板层出现了问题。基本上，有时分配了网格区域的 div 有条件地渲染到页面上。由于我有一个grid-row-gap声明，它保留了页面上不存在的网格模板区域的间隙。我想知道当这种事情发生时是否有办法缩小这些差距。

.grid {
  display: grid;
  grid-template-areas:
    'a b'
    'a c'
    'a d'
    'a e'
    'a f';
  grid-gap: 25px;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border: 1px solid #000;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
}

.f {
  grid-area: f;
}

<div class="grid">
  <div class="a cell">A</div>
  <div class="b cell">B</div>
  <!-- <div class="c cell">C</div> …

我想创建一个材质 ui 轮播，在同一行中有 3 个可见项目。当缩小浏览器的宽度时，我希望这些项目仍位于一行中，并隐藏那些不适合的项目。

这是全屏时：

这就是我想要的：

但这就是我得到的：

你对我做错了什么有什么想法吗？这是我的代码：

  <Paper variant="outlined" className={classes.paper}>
    <Grid
      container
      spacing={2}
      className={classes.grid}
      alignItems="center"
      justify="center"
    >
      ...
      <Box display="flex" alignItems="center" className={classes.box}>
        <Grid item xs="auto" className={classes.arrow}>
          ...Left Arrow...
        </Grid>
        <Grid item>
          <Grid
            container
            spacing={2}
            className={classes.grid}
            alignItems="center"
            justify="center"
          >
            <Grid item xs="auto">
              <UserCard content={users[index]} />
            </Grid>
            <Hidden xsDown>
              <Grid item xs="auto">
                <UserCard content={users[index + 1]} />
              </Grid>
            </Hidden>
            <Hidden smDown>
              <Grid item xs="auto">
                <UserCard content={users[index + 2]} />
              </Grid>
            </Hidden>
          </Grid>
        </Grid>
        <Grid item xs="auto" className={classes.arrow}>
          ...Right Arrow...
        </Grid> …