Not able to position 4th element in second row using css grid-CodePudding

Problem - I want to keep the 4th box in 2nd row like in the current code, but the width of the 4th box should be similar to 1/2/5/6 box i.e. 100px.

But currently 4th box is taking full width in 2nd row, I want it to take only 100px space and rest empty space in row 2. 5 and 6 ox should come on 3rd row.

Alignment Needed -

Code -

.one { background: red; }
.two { background: green; }
.three { background: blue; }
.four { background: pink; }
.five { background: violet; }
.six { background: yellow; }
.seven { background: teal; }
.box { padding: 5px; text-align: center; }
.container {
  border: 1px solid;
  display: grid;
  grid-template-columns: 100px 100px auto;
  gap: 20px 10px;
}

.box:nth-child(4) {
  grid-column: span 3;
}

.box:last-child {
  grid-column-end: span 3;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div >7</div>
</div>

CodePudding user response：

How about directly setting the column start and ends? (Mainly for the 5th)

.one { background: red; }
.two { background: green; }
.three { background: blue; }
.four { background: pink; }
.five { background: violet; }
.six { background: yellow; }
.seven { background: teal; }
.box { padding: 5px; text-align: center; }
.container {
  border: 1px solid;
  display: grid;
  grid-template-columns: 100px 100px auto;
  gap: 20px 10px;
}

.box:nth-child(4) {
  /*grid-column: span 1;*/
  grid-column-start: 1;
  grid-column-end: 2;
}
.box:nth-child(5) {
  grid-column-start: 1;
  grid-column-end: 2;
}

.box:last-child {
  grid-column-end: span 3;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div >7</div>
</div>

CodePudding user response：

You only have to set the position of the 5th element:

.one { background: red; }
.two { background: green; }
.three { background: blue; }
.four { background: pink; }
.five { background: violet; }
.six { background: yellow; }
.seven { background: teal; }
.box { padding: 5px; text-align: center; }
.container {
  border: 1px solid;
  display: grid;
  grid-template-columns: 100px 100px auto;
  gap: 20px 10px;
}

.box:nth-child(5) {
  grid-column: 1;
}

.box:last-child {
  grid-column: span 3;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div >7</div>
</div>

CodePudding user response：

Use responsive elements

.one { background: red; }
.two { background: green; }
.three { background: blue; }
.four { background: pink; }
.five { background: violet; }
.six { background: yellow; }
.seven { background: teal; }
.box { padding: 5px; text-align: center; }
.container {
  border: 1px solid;
  display: grid;
  grid-template-columns: 32% 32% auto;
  gap: 20px 10px;
}



.box:nth-child(5) {
  grid-column-start: 1;
  grid-column-end: 2;
}

.box:last-child {
  grid-column-end: span 3;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div >7</div>
</div>