Apolo Radomer Apolo Radomer - 23 days ago 4
CSS Question

Responsive grid with images (1st column with 3 rows and 2nd column with 1 row)

UPD: I tried this one and the only problem is that I can't put bigger images. I want the height of the grid to be higher (double). I tried changing the col md value to 6 but did not work :



html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
img {
border: 0;
}
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333333;
background-color: #fff;
}

img {
vertical-align: middle;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
}

.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}

.row {
margin-left: -15px;
margin-right: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 30px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666667%;
}
.col-xs-10 {
width: 83.33333333%;
}
.col-xs-9 {
width: 75%;
}
.col-xs-8 {
width: 66.66666667%;
}
.col-xs-7 {
width: 58.33333333%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-5 {
width: 41.66666667%;
}
.col-xs-4 {
width: 33.33333333%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-2 {
width: 16.66666667%;
}
.col-xs-1 {
width: 8.33333333%;
}
.col-xs-pull-12 {
right: 100%;
}
.col-xs-pull-11 {
right: 91.66666667%;
}
.col-xs-pull-10 {
right: 83.33333333%;
}
.col-xs-pull-9 {
right: 75%;
}
.col-xs-pull-8 {
right: 66.66666667%;
}
.col-xs-pull-7 {
right: 58.33333333%;
}
.col-xs-pull-6 {
right: 50%;
}
.col-xs-pull-5 {
right: 41.66666667%;
}
.col-xs-pull-4 {
right: 33.33333333%;
}
.col-xs-pull-3 {
right: 25%;
}
.col-xs-pull-2 {
right: 16.66666667%;
}
.col-xs-pull-1 {
right: 8.33333333%;
}
.col-xs-pull-0 {
right: auto;
}
.col-xs-push-12 {
left: 100%;
}
.col-xs-push-11 {
left: 91.66666667%;
}
.col-xs-push-10 {
left: 83.33333333%;
}
.col-xs-push-9 {
left: 75%;
}
.col-xs-push-8 {
left: 66.66666667%;
}
.col-xs-push-7 {
left: 58.33333333%;
}
.col-xs-push-6 {
left: 50%;
}
.col-xs-push-5 {
left: 41.66666667%;
}
.col-xs-push-4 {
left: 33.33333333%;
}
.col-xs-push-3 {
left: 25%;
}
.col-xs-push-2 {
left: 16.66666667%;
}
.col-xs-push-1 {
left: 8.33333333%;
}
.col-xs-push-0 {
left: auto;
}
.col-xs-offset-12 {
margin-left: 100%;
}
.col-xs-offset-11 {
margin-left: 91.66666667%;
}
.col-xs-offset-10 {
margin-left: 83.33333333%;
}
.col-xs-offset-9 {
margin-left: 75%;
}
.col-xs-offset-8 {
margin-left: 66.66666667%;
}
.col-xs-offset-7 {
margin-left: 58.33333333%;
}
.col-xs-offset-6 {
margin-left: 50%;
}
.col-xs-offset-5 {
margin-left: 41.66666667%;
}
.col-xs-offset-4 {
margin-left: 33.33333333%;
}
.col-xs-offset-3 {
margin-left: 25%;
}
.col-xs-offset-2 {
margin-left: 16.66666667%;
}
.col-xs-offset-1 {
margin-left: 8.33333333%;
}
.col-xs-offset-0 {
margin-left: 0%;
}
@media (min-width: 768px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-1 {
width: 8.33333333%;
}

<section class="main">
<div class="container grid-custom">
<div class="row">
<div class="row col-sm-6">
<div class="col-xs-4">
<img src="http://placehold.it/300x200/3498db/fff" alt="" class="img-responsive">
</div>
<div class="col-xs-4">
<img src="http://placehold.it/300x200/e74c3c/fff" alt="" class="img-responsive">
</div>
<div class="col-xs-4">
<img src="http://placehold.it/300x200/f1c40f/fff" alt="" class="img-responsive">
</div>
<div class="col-xs-4">
<img src="http://placehold.it/300x200/3498db/fff" alt="" class="img-responsive">
</div>
<div class="col-xs-4">
<img src="http://placehold.it/300x200/e74c3c/fff" alt="" class="img-responsive">
</div>
<div class="col-xs-4">
<img src="http://placehold.it/300x200/f1c40f/fff" alt="" class="img-responsive">
</div>
<div class="col-xs-4">
<img src="http://placehold.it/300x200/3498db/fff" alt="" class="img-responsive">
</div>
<div class="col-xs-4">
<img src="http://placehold.it/300x200/e74c3c/fff" alt="" class="img-responsive">
</div>
<div class="col-xs-4">
<img src="http://placehold.it/300x200/f1c40f/fff" alt="" class="img-responsive">
</div>
</div>
<div class="col-sm-6">
<img src="http://placehold.it/600x400/2ecc71/fff" alt="" class="img-responsive center-block">
</div>
</div>
</div>
</section>





I am trying to create a grid of images. More specifically, I need 2 columns where the first one will have 3 rows and each rows will have 3 columns (images) and the second one will have one image.

I want the grid to be responsive and look exactly like this no matter what the size screen is:

enter image description here

but it looks messy if I change the browser or screen size:



(function() {

var img = document.getElementById('one').firstChild;
img.onload = function() {
if (img.height > img.width) {
img.height = '20%';
img.width = 'auto';
}
};

}());

* {
margin: 0;
padding: 0;
}
.one,
.two,
.four,
.five,
.six,
.seven,
.eight {
height: 540px;
text-align: center;
border: 1px solid white;
}
.four {
height: 180px;
}
.container {
width: 90%;
margin: 30px auto 0px auto;
}
.container:before,
.container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
.one {
float: left;
width: 33.33333%;
margin-left: 66.66667%;
margin-right: -100%;
padding-left: 5px;
padding-right: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
}
.nested {
float: left;
width: 66.66666%;
margin-right: 33.333334%;
margin-right: -100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
padding-left: 0;
padding-right: 0;
}
.four {
clear: left;
float: left;
width: 100%;
margin-left: 0%;
margin-right: -100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
}
@media screen and (max-width: 700px) {
.one {
float: left;
width: 100%;
margin-left: 0%;
margin-right: -100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
}
.nested {
clear: left;
float: left;
width: 100%;
margin-left: 0%;
margin-right: -100%;
;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
padding-left: 0;
padding-right: 0;
}
.four {
clear: left;
float: left;
width: 100%;
margin-left: 0%;
margin-right: -100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
}
}
img {
width: auto;
max-height: 540px;
}
.second {
width: 33.3334%;
height: auto;
float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

<div class="nested">
<div class="four">
<a href="04.html">
<img class="second" src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
</a>
<a href="05.html">
<img class="second" src="http://ghettoblastermagazine.com/wp-content/uploads/2015/04/DWM-cover-11-e1429066853131-914x576.jpg" />
</a>
<a href="06.html">
<img class="second" src="http://contabilidadmlm.com/games/wp-content/uploads/2013/10/Captura-de-pantalla-2013-09-02-a-la-2528s-2529-19.19.26-914x576.png" />
</a>
</div>
<div class="four">
<a href="04.html">
<img class="second" src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
</a>
<a href="05.html">
<img class="second" src="http://ghettoblastermagazine.com/wp-content/uploads/2015/04/DWM-cover-11-e1429066853131-914x576.jpg" />
</a>
<a href="06.html">
<img class="second" src="http://contabilidadmlm.com/games/wp-content/uploads/2013/10/Captura-de-pantalla-2013-09-02-a-la-2528s-2529-19.19.26-914x576.png" />
</a>
</div>
<div class="four">
<a href="04.html">
<img class="second" src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
</a>
<a href="05.html">
<img class="second" src="http://ghettoblastermagazine.com/wp-content/uploads/2015/04/DWM-cover-11-e1429066853131-914x576.jpg" />
</a>
<a href="06.html">
<img class="second" src="http://contabilidadmlm.com/games/wp-content/uploads/2013/10/Captura-de-pantalla-2013-09-02-a-la-2528s-2529-19.19.26-914x576.png" />
</a>
</div>

<div class="one">
<img class="first" src="http://techno-shop.bg/userfiles/productlargeimages/product_10549.jpg" />
</div>

</div>





I tried using a different version with a repsonsive grid :



/* SECTIONS */

.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */

.col {
background: #124;
display: block;
float: left;
margin: 1% 0 1% 1.6%;
}
.col:first-child {
margin-left: 0;
}
/* GROUPING */

.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
/* For IE 6/7 */
}
/* GRID OF TWO */

.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 49.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
}
@media only screen and (max-width: 480px) {
.span_2_of_2,
.span_1_of_2 {
width: 100%;
}
}
/* GRID OF THREE */

.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.66%;
}
.span_1_of_3 {
width: 33.33%;
}
/* GO FULL WIDTH BELOW 480 PIXELS */

@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
.span_3_of_3,
.span_2_of_3,
.span_1_of_3 {
width: 100%;
}
}
.col2 {
background: #F1F1F1;
display: block;
float: left;
margin: 0;
max-height: 100px;
}
.col:first-child {
margin-left: 0;
}
img {
max-height: 100%;
max-width: 100%;
margin: 0;
float: left;
}

<div class="section group">
<div class="col span_1_of_2">
<div class="section group">
<div class="col2 span_1_of_3" style="background:#FF0000;">
<a href="04.html">
<img src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
</a>
</div>
<div class="col2 span_1_of_3">
<a href="05.html">
<img src="http://ghettoblastermagazine.com/wp-content/uploads/2015/04/DWM-cover-11-e1429066853131-914x576.jpg" />
</a>
</div>
<div class="col2 span_1_of_3">
<a href="04.html">
<img src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
</a>
</div>
<div class="section group">
<div class="col2 span_1_of_3">
<a href="04.html">
<img src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
</a>
</div>
<div class="col2 span_1_of_3">
<a href="05.html">
<img src="http://ghettoblastermagazine.com/wp-content/uploads/2015/04/DWM-cover-11-e1429066853131-914x576.jpg" />
</a>
</div>
<div class="col2 span_1_of_3">
<a href="04.html">
<img src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
</a>
</div>
<div class="section group">
<div class="col2 span_1_of_3" style="background:#FF0000;">
<a href="04.html">
<img src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
</a>
</div>
<div class="col2 span_1_of_3">
<a href="05.html">
<img src="http://ghettoblastermagazine.com/wp-content/uploads/2015/04/DWM-cover-11-e1429066853131-914x576.jpg" />
</a>
</div>
<div class="col2 span_1_of_3">
<a href="04.html">
<img src="http://mediabitch.ru/wp-content/uploads/2016/04/Snimok-ekrana-2016-04-21-v-21.31.11-914x576.png" />
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col span_1_of_2">
<a href="04.html">
<img class="big" src="http://techno-shop.bg/userfiles/productlargeimages/product_10549.jpg" />
</a>
</div>
</div>




Answer

you can try bootstrap responsive framework and the code is as shown

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
      .red, .blue, .yellow {height:50px;border-right:1px solid black;}
      .red{background-color:red;}
      .blue{background-color:blue;}
      .yellow{background-color:yellow;}
      .brown{height:150px;background-color:brown;}
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-sm-8 col-xs-8">
          <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="col-md-4 col-sm-4 col-xs-4 red"></div>
            <div class="col-md-4 col-sm-4 col-xs-4 red"></div>
            <div class="col-md-4 col-sm-4 col-xs-4 red"></div>
          </div>
          <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="col-md-4 col-sm-4 col-xs-4 blue"></div>
            <div class="col-md-4 col-sm-4 col-xs-4 blue"></div>
            <div class="col-md-4 col-sm-4 col-xs-4 blue"></div>
          </div>
          <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="col-md-4 col-sm-4 col-xs-4 yellow"></div>
            <div class="col-md-4 col-sm-4 col-xs-4 yellow"></div>
            <div class="col-md-4 col-sm-4 col-xs-4 yellow"></div>
          </div>
        </div>
        <div class="col-md-4 col-sm-4 col-xs-4 brown"> 
        </div>
      </div>
    </div>
  </body>
</html>
Comments