+1 on John's suggestion for ease of use. Best,
Karl DeSaulniers Design Drumm http://designdrumm.com On Jan 21, 2016, at 9:54 AM, "John D" <xfs...@hotmail.com> wrote: > If you are running it in Bootstrap (you said cutting edge technology) then it > is pretty simple. I would do something like this: > > <div class="row"> > <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> > <h2 class="text-center">1</h2> > <img alt="Responsive image" class="img-circle" src="..."> > </div> > <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> > <h2 class="text-center">2</h2> > <img alt="Responsive image" class="img-circle" src="..."> > </div> > <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> > <h2 class="text-center">3</h2> > <img alt="Responsive image" class="img-circle" src="..."> > </div> > <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> > <h2 class="text-center">4</h2> > <img alt="Responsive image" class="img-circle" src="..."> > </div> > </div> > > > And to test this out, create a blank HTML5 page and use this code at the head > of it: > > <!DOCTYPE html> > <html lang="en"> > > <head> > <meta charset="utf-8"> > <meta content="IE=edge" http-equiv="X-UA-Compatible"> > <meta content="width=device-width, initial-scale=1" name="viewport"> > <!-- The above 3 meta tags *must* come first in the head; any other head > content must come *after* these tags --> > <title>Bootstrap 101 Template</title> > <title>Untitled 1</title> > <link > href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"; > rel="stylesheet" type="text/css"> > </head> > > If you add more columns then all you need is to change the numbers 3 to > something else as long as the total comes to 12, Bootstrap works in grid of > 12 and I have used 4 columns so each grid is 3. but you get the idea. > > > > /* Quoted Message Follows: */ > -----Original Message----- From: Micky Hulse > Sent: Thursday, January 21, 2016 12:06 AM > To: CSS-Discuss > Subject: [css-d] Best technique for: Any number of columns, plus fixed > margin, in a responsive parent container > > Hi! > > Just curious what techniques you use when you want to have a container > with any number of child columns that have fixed-width margins, only > on the inside of columns. > > For example, I would like to create a 4 column module (pseudo-markup follows): > > <parent> > <col 1> > <col 2> > <col 3> > <col 4> > </parent> > > … and later have the ability to throw-in a 5th or 6th column, without > having to adjust CSS. > > <parent> > <col 1> > <col 2> > <col 3> > <col 4> > <col 5> > <col 6> > </parent> > > Additionally, I would like to have margins (not padding or > faux-margins), of any unit (i.e., px, em, % ...), controlling the > column gutters (only on inside, not outermost column edges). > > Optimally, this technique would be responsive-friendly, js-free and > clean/simple to implement. > > Out of all the techniques out there (I'm assuming) to do such a thing, > which is your favorite? Can you provide example code? > > I'm open to seeing cutting-edge techniques as well as oldschool ones. :) > > > ______________________________________________________________________ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
