Question

我正在尝试使网格项目对齐，因此如果我的项目长于其他项目，则它们会拉伸所有其他项目的div。这就是正在发生的事情，下面的摘录就是我想要发生的事情。

有人有什么想法吗？

#grid-container {
  display: grid;
  grid-template-columns: fit-content(100%) [start] auto fit-content(100%) [end] fit-content(100%) [end] fit-content(100%) [end] fit-content(100%) [end] fit-content(100%) [end] fit-content(100%) [end];
}

.cat,
.title,
.icon,
.date {
  padding-right: 15px;
}

<div id="grid-container">
  <div class="cat">accusamus</div>
  <div class="title">
    <a class="titleURL" href="">Lorem ipsum</a>
  </div>
  <div class="icon"></div>
  <div class="date">22/Sep/2017</div>
  <div>143</div>
  <div>490</div>
  <div>323</div>
  <div class="user">username5362</div>
</div>
<div id="grid-container">
  <div class="cat">Bo</div>
  <div class="title">
    <a class="titleURL" href="">qui dolorem ipsum quia dolor</a>
  </div>
  <div class="icon"></div>
  <div class="date">08/Nov/2014</div>
  <div>1543</div>
  <div>4790</div>
  <div>3223</div>
  <div class="user">aker009</div>
</div>

这是我要发生的事情，除了没有将所有内容都集中到一个div中。

#grid-container {
  display: grid;
  grid-template-columns: fit-content(100%) [start] auto fit-content(100%) [end] fit-content(100%) [end] fit-content(100%) [end] fit-content(100%) [end] fit-content(100%) [end] fit-content(100%) [end];
}

.cat,
.title,
.icon,
.date {
  padding-right: 15px;
}

<div id="grid-container">
  <div class="cat">accusamus</div>
  <div class="title">
    <a class="titleURL" href="">Lorem ipsum</a>
  </div>
  <div class="icon"></div>
  <div class="date">22/Sep/2017</div>
  <div>143</div>
  <div>490</div>
  <div>323</div>
  <div class="user">username5362</div>
  <div class="cat">Bo</div>
  <div class="title">
    <a class="titleURL" href="">qui dolorem ipsum quia dolor</a>
  </div>
  <div class="icon"></div>
  <div class="date">08/Nov/2014</div>
  <div>1543</div>
  <div>4790</div>
  <div>3223</div>
  <div class="user">aker009</div>
</div>

Answer 1

如果您确实需要使用网格系统，请查看我在底部发布的flexbox链接。否则，引导程序也是响应式布局的好框架。

相信这会满足您的需求：

<table id="gridContainer">
  <tr>
    <td class="cat">
      accusamus
    </td>
    <td class="title">
      <a class="titleURL" href="">Lorem ipsum</a>
    </td>
    <td class="icon">
      <p class="date">22/Sep/2017</p>
    </td>
    <td class="date">
      <p>143</p>
      <p>490</p>
      <p>323</p>
    </td>
    <td class="user">
      username5362
    </td>
  </tr>
  <tr>
    <td class="cat">
      Bo
    </td>
    <td class="title">
      <a class="titleURL" href="">qui dolorem ipsum quia dolor</a>
    </td>
    <td class="icon">
      <div class="date">08/Nov/2014</div>
    </td>
    <td class="date">
      <p>1543</p>
      <p>4790</p>
      <p>3223</p>
    </td>
    <td class="user">
      aker009
    </td>
  </tr>
</table>

这是CSS：

.cat,
.title,
.icon,
.date {
  margin:0;
  padding:0;
  padding-right:15px !important;
  overflow-x:hidden;
}

.date p {
  display: inline-block;
  padding:0;
  margin:0;
}

tr, td {
  padding:0;
  margin:0;
}

使用简单的表比尝试强制使用容器容易。另外，我会考虑使用“ flexbox”，它允许更快速的设计，这是您尝试做的事情。同样也一文不值，您真的不想在给定页面上多次使用“ id”。如果您需要多次使用它，则应该使用一个类。

这是有关flexbox

的更多信息

这是codepen

Answer 2

那是因为网格列的宽度是根据内容确定的，我认为为每列定义最小宽度和最大宽度会有所帮助，但是在定义最大宽度时，您还需要管理文本溢出列。

html / css网格匹配每列的内容宽度

2 个答案: