Sat, 2015-01-03 23:19
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
Sun, 2015-01-04 20:32
#1
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