select nth-child based on n css

Question

I'm trying to build a grid layout like Instagram search layout on mobile apps. I used grid but as you can see , after second big image it's getting messed up! I know what the problem is but can't solve that!!

here is html/css codes :

.grid-container {
  direction: ltr;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, calc(100vw / 3));
  grid-auto-rows: calc(100vw / 3);
  grid-auto-flow: dense;
}

.grid-container .grid-item {
  padding: 8px;
}

.grid-container .grid-item:nth-child(8n+2) {
  grid-column: span 2;
  grid-row: span 2;
}

.grid-container .grid-item .item {
  width: 100%;
  height: 100%;
  background: rgb(255, 65, 65);
  font-size: 22px;
  font-family: 'Roboto';
}

the main problem is with nth-child(8n+2) as the pattern for big section is: 2nd, 10th, 20th, 28th, 38th , ..... and nth-child(8n+2) only hit 2nd, 10th, 18th, 26th, ...

so what should I do?? is there a way to reset grid pattern? or something like that?

TechySharnav · Accepted Answer

You need to use 2 patterns:

18n+2 which will select 2, 20, 38...
18n+10 which will select 10, 28, 46...

Also, As stated by @tacoshy, you need to use grid-template-columns: repeat(3, 1fr); to get the result, as shown in the picture.

.grid-container {
  direction: ltr;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: calc(100vw / 3);
  grid-auto-flow: dense;
}

.grid-container .grid-item {
  padding: 8px;
}

.grid-container .grid-item:nth-child(18n+2), .grid-container .grid-item:nth-child(18n+10){
  grid-column: span 2;
  grid-row: span 2;
}

.grid-container .grid-item .item {
  width: 100%;
  height: 100%;
  background: rgb(255, 65, 65);
  font-size: 22px;
  font-family: 'Roboto';
}

select nth-child based on n css

Answers (2)

Related Questions