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/
