Grid layout but avoid space distribute equally-CodePudding

I'm trying to use the grid layout for two columns in one row which can be easily achieved by flex. I have to create one more div for flex but the grid doesn't need one more div.

The problem with the grid is that it will divide the width space by 2 (cannot align to start/left) and that's not what I want, please refer to the first example below and you will understand.

Is there any way to use the grid in this situation but we can align the items to the left like in the second example?

#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 ></div>
  <div ></div>
  <div ></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 ></div>
  <div id="main-2">
    <div ></div>
    <div ></div>
  </div>
</div>

Edited

Inline-block might work but we cannot control how many items should be on each row. Imagine the width of the first div .first is dynamic and we do not know how wide it would be(but I will make it 30px for illustration). Now the desired layout should be only one .first and one .second on each row.

By inline-block it would appear that now each row is one .first, one .second, and one .first. Check out the example below. Because we cannot control the amount like grid on each row.

#main {
  width: 120px;
}

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

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

<div id="main">
  <div ></div>
  <p >hhhhhh</p>
  <div ></div>
  <p >hhhhhh</p>
  <div ></div>
  <p >hhhhhh</p>
</div>

CodePudding user response：

Define the columns as auto and keep only one at 1fr then you can align to the left.

#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 ></div>
  <div ></div>
  <div ></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 ></div>
  <div id="main-2">
    <div ></div>
    <div ></div>
  </div>
</div>