CSS issues for grid layout with squares, rows and columns
I am trying to create what I thought would be a simple div layout, however the css turns out to be a little more complicated than I originally thought. Each of the DIVs has to stand alone (so I can't use a div to hold the SQUARES and ROW and the other div to hold the COLUMN) for responsiveness.
I am trying to achieve this ...
With a narrow responsive version like this ...
But I cannot get the ROW container to sit below the SQUARE containers. This is the code I have so far and a fiddle .
Html
<div id="wrapper">
<div id="content">
<div id="item" class="square">
text
</div>
</div>
<div id="content">
<div id="item" class="square">
text
</div>
</div>
<div id="content">
<div id="item" class="horiz">
text
</div>
</div>
<div id="content">
<div id="item" class="vert">
text
</div>
</div>
<div id="content">
<div id="item" class="vert">
text
</div>
</div>
CSS
#wrapper{
max-width: 95%;
height: auto;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
background: #00F;
}
#content{
margin-top: 25px;
background: #F00;
display: inline;
}
#item{
background: #F0F;
text-align: center;
}
.square {
width:100px;
height:100px;
margin:1%;
float:left;
}
.horiz {
width:200px;
height:100px;
margin:1%;
float:left;
display: block;
}
.vert {
width:100px;
height:200px;
margin:1%;
float:left;
}
source to share
Here's one way to create a responsive mesh similar to the one you need.
I would start with the following HTML:
<div id="wrapper">
<div class="item square s1">text square 1</div>
<div class="item square s2">text square 2</div>
<div class="item horiz">text horiz</div>
<div class="item vert v1">text vert v1</div>
<div class="item vert v2">text vert v2</div>
</div>
and look at the following CSS:
#wrapper {
width: 90vw;
height: 45vw;
margin: 0 auto;
background: #00F;
position: relative;
}
.item {
text-align: center;
background-color: pink;
}
.square {
width: 23.75%;
height: 47.5%;
position: absolute;
top: 2%;
}
.s1 {
left: 1%;
}
.s2 {
left: 25.75%;
}
.horiz {
width: 48.5%;
height: 46.5%;
position: absolute;
top: 51.5%;
left: 1%;
}
.vert {
width: 23.75%;
height: 96.0%;
position: absolute;
top: 2%;
}
.v1 {
left: 50.5%;
}
.v2 {
left: 75.25%;
background-color: yellow;
}
The trick is to set the units for the containing block using percentage lengths (vw units, http://www.w3.org/TR/css3-values/#viewport-relative-lengths ).
I set the width to 90% of the viewport width and the height to half that so you end up with a 2: 1 block.
You can then use absolute positioning to position different elements in the grid using percentages for width, height, and margins.
The result is responsive, but the content can overflow as all child blocks are fixed sizes (this might be fine in your mobile app).
You can use a similar approach for narrow screen layout using 1: 2: height instead of 2: 1.
See a demo at: http://jsfiddle.net/audetwebdesign/nwgcLcc0/
Note. It would be much easier to add a wrapper around the two squares + a horizontal set of elements, and then a second wrapper around the two vertical elements.
source to share