CODEWITHSUNDEEP
htmlcssresponsive-design
Laci K
Laci K

Reputation: 595

CSS 3 Column responsive grid

I would like to do a 3-column responsive grid layout with a lots of floated <div>s with no grouping, but I'm failing and not on the responsive side, because after my first media query it works fine but I couldn't figure out the normal desktop view. Probably because on desktop (down to 990px) the layout should go like this: first col (aligned left) with no left margin or padding than a 20px gap than second col (aligned center) after it 20px gap again and than third col (aligned right) with no right margin or padding.

The html looks like this:

<div class="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>

the css:

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  max-width: 904px;
  margin: 0 auto;
  overflow: hidden;
}

.item {
  width: 288px;
  float: left;
}

@media screen and (max-width: 960px) {
  .container {
    width:98%;
   }

  .item {
    width: 50%;
    padding: 1% 4%;
    margin: 0;
  }
}
@media screen and (max-width: 600px) {
  .item {
    width: auto;
    padding 1% 4%;
    margin: 0;
   }
}

I was thinking of using nth-child() but couldn't figure out a correct sequence because let's say I want a 20px margin on every element which is in the middle then it would be like this: 2,5,8,11,14,..,n After a wile I was considering Masonry js but I don't want to use js, so is there any css based solution for this?

Upvotes: 0

Views: 515

Answers (1)

peterjb
peterjb

Reputation: 819

You're nth-child idea might work. Try:

.item:nth-child(3n+2)
{
    background-color:#f00;
}

Upvotes: 1

Related Questions