Is this layout possible with implicit CSS grid?

Question

I'm using implicit CSS grid with: grid-template-columns: 1fr 1fr;

Is it possible to make it look like a zigzag layout? Like:

...

I made a pen here: https://codepen.io/stdusan/pen/yLvPKNb

body {
  padding: 50px;
}

div {
  padding: 20px;
}

.image {
  background: red;
  padding: 20px;
}

.text {
  background: #ddd;
  padding: 20px;
}

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
}


  
  Some text
  
  Some text
  
  Some text
  
  Some text
  
  Some text
  
  Some text
  
  Some text
  
  Some text

user_8620333 · Answer

Yes

.image {
  background: red;
  padding: 20px;
}

.text {
  background: #ddd;
  padding: 20px;
}

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: dense; /* this */
}

.image:nth-child(4n + 3) {
  grid-column: 2; /* and this */
}


  
  Some text
  
  Some text
  
  Some text
  
  Some text
  
  Some text
  
  Some text
  
  Some text
  
  Some text

Is this layout possible with implicit CSS grid?

1 Answers