How to change grid columns size on implicit row?-CodePudding

I'm interesting how could I change grid columns on a implicit row. I will not copy code I'm working on but I will create small example and explain what I mean.

<div class='container'>
 <p>item-1</p>
 <p>item-2</p>
 <p>item-3</p>
 <p>item-4</p>
 <p>item-5</p>
 <p>item-6</p>
</div>



.container {
  display: grid;
  grid-template-columns: 2fr 3fr;
}

Okay here is the thing. We have 6 grid items. We specified in container that we want to have 2 columns, and since we have 6 items it will implicitly create 3 grid rows.

Now, each odd item will populate first column which is 2fr and each even will populate second, 3fr column.

Lets say that i want to make first column in a second row 3fr and second column in a second row 2fr. Basically i want my item 3 to be in a 3fr column, but I don't want to change orders (I mean I don't want to transfer item-3 into second column of second row).

To put it simple I want to change width of first column of second row to 3fr and second column of second row to 3fr without touching anything in a div with a class of container.

CodePudding user response：

Essentially, once a row/column size has been set it cannot be changed.

What you can do is define the grid in such a way that items can span multiple columns.

So instead of a 5fr wide container, define one that is 10 columns of 1fr each and then specify how may columns an individual child will span.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 1em;
  margin: 1em;
}

p {
  border: 1px solid grey;
}

p {
  grid-column: span 4
}

p:nth-child(2) {
  grid-column: span 6;
}

p:nth-child(3) {
  grid-column: span 6;
}

<div class='container'>
  <p>item-1</p>
  <p>item-2</p>
  <p>item-3</p>
  <p>item-4</p>
  <p>item-5</p>
  <p>item-6</p>
</div>