• Locked
1 reply [Last post]
Sat, 2015-01-03 23:19
millers
millers's picture
Offline
Enthusiast
Last seen: 2 years 16 weeks ago
Timezone: GMT+1
Joined: 2004-11-22
Posts: 70
Points: 41

I want to make a product grid that is responsive, so that on a small screen there is only 1 column but on a huge screen there may be 10 columns for example.

This is fine with float but I want the left item in a row to be flush against the left side and the right flush to the right, had I had say four columns on all resolutions I'd use nth child to remove the right and left margins but with it being responsive I don't know which will be the right and left items.

I hope that makes sense

<style>
.grid-item-wrap {position: relative; margin: 0 5%}
.grid-item {display; inline-block; float: left; margin: 10px; width: 200px; height: 200px}
.grid-item:first-child {margin-left: 0} //set first item flush to the left
</style>
 
<div class='grid-item-wrap'>
 
<div class='grid-item'>
   <img src='image.jpg' />
</div>
<div class='grid-item'>
   <img src='image.jpg' />
</div>
<div class='grid-item'>
   <img src='image.jpg' />
</div>
<div class='grid-item'>
   <img src='image.jpg' />
</div>
<div class='grid-item'>
   <img src='image.jpg' />
</div>
 
</div>

Thanks

Top
Tags:
Sun, 2015-01-04 20:32
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 9 hours 7 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9749
Points: 3831

Is this what you want? 

<!DOCTYPE HTML>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="Content-Type">
 
  <title>Test document</title>
  <style type="text/css">
/*<![CDATA[*/
 
  #grid {
    margin: 0 auto;
    padding: 0;
    text-align: justify;
    width: 90%;
    word-spacing: 10px;
    }
 
  #grid::after {
    content: "";
    display: inline-block;
    width: 100%;
    }
 
  #grid li {
    border: 1px solid black;
    display: inline-block;
    height: 200px;
    margin: 10px 0;
    text-align: left;
    width: 200px;
    }
 
  /*]]>*/
  </style>
</head>
 
<body>
  <ul id="grid">
    <li>product</li>
 
    <li>product</li>
 
    <li>product</li>
 
    <li>product</li>
 
    <li>product</li>
 
    <li>product</li>
 
    <li>product</li>
  </ul>
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
  • Locked