网格布局但避免空间均匀分布

Question

我试图对一行中的两列使用网格布局，这可以很容易地通过flex实现。我必须为flex再创建一个div，但是网格不需要一个div。

网格的问题是它将宽度空间除以2(不能对齐到开始/向左)，这不是我想要的，请参考下面的第一个示例，您就会明白了。

在这种情况下是否有任何方法使用网格，但是我们可以像第二个例子那样将项目与左边对齐吗？

​

#main-1 {
  display: grid;
  gap: 30px;
  grid-teplate-column: repeat(2, minmax(0, 1fr));
}

.test-1 {
  background-color: orange;
  grid-area: span 1 / span 2;
}

.test-2 {
  background-color: gray;
  width: 150px;
}

#main-2 {
  display: flex;
  gap: 30px;
  margin-top: 30px;
}

.test-3 {
  background-color: orange;
  width: 100%;
}

.test-4 {
  background-color: gray;
  width: 150px;
}

.test-1,
.test-2,
.test-3,
.test-4 {
  height: 60px;
}

<h1>Grid</h1>

<div id="main-1">
  <div class="test-1"></div>
  <div class="test-2"></div>
  <div class="test-2"></div>
</div>

<h1 style="margin:30px 0 0 0;padding-top:15px;border-top: 3px solid #000;">Flex</h1>
<p style="margin:0 0 30px 0;">This is the desired layout but with one more extra div</p>

<div>
  <div class="test-3"></div>
  <div id="main-2">
    <div class="test-4"></div>
    <div class="test-4"></div>
  </div>
</div>

​

编辑的

内联块可以工作，但我们不能控制每行应该有多少项。假设第一个div .first的宽度是动态的，我们不知道它会有多宽(但我会将其设置为30 is以作说明)。现在，所需的布局应该是每行只有一个.first和一个.second。

根据inline-block，现在看来每一行都是一个.first、一个.second和一个.first。请查看下面的示例。因为我们无法控制每一行的数量，就像网格一样。

​

#main {
  width: 120px;
}

.first,
.second {
  display: inline-block;
  height: 60px;
}

.first {
  background-color: orange;
  width: 30px;
}

<div id="main">
  <div class="first"></div>
  <p class="second">hhhhhh</p>
  <div class="first"></div>
  <p class="second">hhhhhh</p>
  <div class="first"></div>
  <p class="second">hhhhhh</p>
</div>

​

Answer 1

将列定义为auto，并将其中一列保留在1fr中，然后您可以向左对齐。

​

#main-1 {
  display: grid;
  gap: 30px;
  /* update "5" based on your needs */
  grid-template-columns: repeat(5,auto) 1fr;
  justify-content: left; /* align to left */
}

.test-1 {
  background-color: orange;
  grid-column: 1/-1; /* take all the columns */
}

.test-2 {
  background-color: gray;
  width: 150px;
}

#main-2 {
  display: flex;
  gap: 30px;
  margin-top: 30px;
}

.test-3 {
  background-color: orange;
  width: 100%;
}

.test-4 {
  background-color: gray;
  width: 150px;
}

.test-1,
.test-2,
.test-3,
.test-4 {
  height: 60px;
}

<h1>Grid</h1>

<div id="main-1">
  <div class="test-1"></div>
  <div class="test-2"></div>
  <div class="test-2"></div>
</div>

<h1 style="margin:30px 0 0 0;padding-top:15px;border-top: 3px solid #000;">Flex</h1>
<p style="margin:0 0 30px 0;">This is the desired layout but with one more extra div</p>

<div>
  <div class="test-3"></div>
  <div id="main-2">
    <div class="test-4"></div>
    <div class="test-4"></div>
  </div>
</div>

​