How to set width when using grid view by css?

Issue

.flex-container {
  width: 100%;
  background: orange;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /*define the number of column*/
  grid-auto-flow: dense; /* this is important to fill all the space*/
  grid-gap: 20px;
  padding: 10px;
}

.item {
  background: purple;
  height: 80px;
  line-height: 80px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

.item:nth-child(4n + 3) {
  grid-column: 2;
}
.item:nth-of-type(even) {
  width: 150px;
}
.item:nth-of-type(odd) {
  width: calc(100% - 150px);
}

<div class="flex-container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
        <div class="item">16</div>
        <div class="item">17</div>
        <div class="item">18</div>
      </div>

I'd created snake grid of the listing. In that, I added even items width and odd items width different.

But as you can see the gap between and at tha end. I want to fill that part.

Means that if in 100% of full width, let's take odd(30%) & even(70%). So gap should not appear between it.

But I'm not able to find anywhere a perfect solution of it. So here I'd added a full code of it. Please have a look and suggest a solution. Click Here

<div class="flex-container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
        <div class="item">16</div>
        <div class="item">17</div>
        <div class="item">18</div>
      </div>

.flex-container {
  width: 100%;
  background: orange;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /*define the number of column*/
  grid-auto-flow: dense; /* this is important to fill all the space*/
  grid-gap: 20px;
  padding: 10px;
}

.item {
  background: purple;
  height: 80px;
  line-height: 80px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

.item:nth-child(4n + 3) {
  grid-column: 2;
}
.item:nth-of-type(even) {
  width: 150px;
}
.item:nth-of-type(odd) {
  width: calc(100% - 150px);
}

Thank you.

Solution

You can do it like below:

.grid-container {
  background: orange;
  display: grid;
  grid-auto-flow: dense;
  gap: 20px;
  padding: 10px;
}

.item:nth-child(4n + 1) {
  grid-column: span 2; /* 2 columns for item 1*/
}

.item:nth-child(4n + 3) {
  grid-column: 2/span 2; /* 2 columns + 2nd column for item 3*/
}

.item {
  background: purple;
  height: 80px;
  line-height: 80px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
  <div class="item">16</div>
  <div class="item">17</div>
  <div class="item">18</div>
</div>

Also like below for more control of the size:

.grid-container {
  background: orange;
  display: grid;
  grid-auto-flow: dense;
  gap: 20px;
  padding: 10px;
}

.item {
  grid-column-end: span 3; /* 30% */
}

.item:nth-child(4n + 1),
.item:nth-child(4n + 3){
  grid-column-end: span 7; /* 70% */
}

.item:nth-child(4n + 3) {
  grid-column-start: 4; /* 3 + 1 */
}

.item {
  background: purple;
  height: 80px;
  line-height: 80px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
  <div class="item">16</div>
  <div class="item">17</div>
  <div class="item">18</div>
</div>

Answered By - Temani Afif