up vote 0 down vote favorite

This may be answered somewhere, but I am unsure of exact terminology as I am new to web development. I am working with a mean.js app and I have a a container that I am filling: 

<div class="container-fluid">
  <div class="col-sm-4 col-md-6 col-lg-4">
     <div class="panel" ng-repeat='item in itemList'>
      {{item.content}}
     </div>
  </div>
</div>

But I don't actually want the col sizes to be as specified there. I would like to set the panel sizes to a set size, something like 150px X 150px per panel and I want the rows to fill with columns based on the resolution of the screen. So if the column hits the end of the screen I want it to start a new row only in that case. For example, if I had 10 panels and someone had a window 1500px wide it would only show 1 row, but as they shrunk the window it would readjust until eventually only showing 1 panel per row.

Hopefully this is something that is possible, but any suggestions would be appreciated!

share|improve this question
up vote 0 down vote accepted

Set display:inline-block for those inner boxes. This will ensure that, the boxes will take all the available space on a row, After that, it will go to the next row

.c-panel {
  width: 150px;
  height: 150px;
  background: red;
  margin: 5px;
  display: inline-block;
}
<div class="container-fluid">
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div>

share|improve this answer
  • Hi, I gave this a try. It doesnt seem to be working. I am using bootstrap panels as my boxes, so I set that css you gave as the css for .panel but it didnt change. – Code2Code Apr 24 at 17:34
  • @Code2Code, try changing class name – Gautam Naik Apr 24 at 17:36
  • thanks! That worked! – Code2Code Apr 24 at 17:49

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.