CODEWITHSUNDEEP
csscss-selectors
JMKelley
JMKelley

Reputation: 658

nth Child Grid Selection

I'm looking to build the following grid structure like the supporting image below, so that it carries on with the same pattern, but I'm unsure on what nth child rule I should be using, I've tried quite a few to no avail.

enter image description here

My Current code is

.category:nth-child(5n+1)
{
  width:48%;
  max-width: 48%;
}

But unfortunately, this is leaving a row of 4 between my desired effect.

Upvotes: 0

Views: 60

Answers (1)

pentzzsolt
pentzzsolt

Reputation: 1131

I assume these items are floating and that you want to be able to add infinitely many and keep the same pattern.

In this case I would use two selectors, because you need to select the first and the last items out of every block of six.

.category:nth-child(6n), .category:nth-child(6n-5) {
    max-width: 48%;
    width: 48%;
}

Upvotes: 1

Related Questions