2

grid layout with imges

I'm trying to build this grid layout for images with HTML and CSS.

I would like to use divs rather than table but I'm not sure what's the best way to go. Also I need to put a short description below each image.

web-tiki
  • 99,765
  • 32
  • 217
  • 249
user3216026
  • 245
  • 2
  • 6
  • 11

3 Answers3

4

I made up this simple responsive layout using floats and padding-bottom.

The padding bottom is used to simulate the height of the elements.

It can be a good start for you. If you want to go futher and learn more like for example add responsive images/text inside those squares, I advise you to check out grid of responsive squares. It descibes in detail a way to achieve a responsive grid of squares with centered content.

div {
  float: left;
}
div > div {
  background: #2C3E50;
}
#big_wrap, #small_wrap {
  width: 50%;
}
#big_wrap > div {
  width: 48%;
  padding-bottom: 48%;
  margin: 1%;
}
#small_wrap > div {
  width: 31.333%;
  padding-bottom: 31.333%;
  margin: 1%;
}
<div id="big_wrap">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div id="small_wrap">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

FIDDLE

Community
  • 1
  • 1
web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • Is there a way that I can add more squares in the small_wrap so thath it will add them on to the right end? I want to make it horizontal scrollable. – user3216026 Apr 18 '14 at 12:27
  • @user3216026 It is possible but it changes a lot of things, you should post an other question for that and post a link to it here in comments so I can find it. – web-tiki Apr 18 '14 at 12:39
  • Ok I created a new question. Here is the link http://stackoverflow.com/questions/23156598/create-girdlayout-for-images-with-horizontal-scroll – user3216026 Apr 18 '14 at 14:54
  • Great example. Thanks very much. how did you come up with the sizes (% values) that look so good? Did you just estimate and then keep making changes or was this something you've done in the past? is there any guidance you know of that would help me get an idea with this? Thx – raddevus Jun 27 '15 at 14:28
  • 1
    @daylight the sizes are calculated : the sum of the space taken by each element (width + margin left + margin right) must be equal to 100% to fill up their parent. example for the small elements on the right : 3 * (31.333 + 1 + 1) ~= 100 . You can also find another explanation in [grid of responsive squares](http://stackoverflow.com/questions/20456694/grid-of-responsive-squares/20457076#20457076) and [mosaic of images](http://stackoverflow.com/questions/22221333/mosaic-of-images-html-css/22412842#22412842) – web-tiki Jun 27 '15 at 16:26
1

Use this layout:-

HTML

<div class="main">

<div class="child">
    <div class="left">
        <div class="four"></div>
        <div class="four"></div>
    </div>

    <div class="left">
        <div class="four"></div>
        <div class="four"></div>
    </div>
</div>

<div class="child">
    <div class="right">
        <div class="nine"></div>
        <div class="nine"></div>
        <div class="nine"></div>
    </div>
    <div class="right">
        <div class="nine"></div>
        <div class="nine"></div>
        <div class="nine"></div>
    </div>
    <div class="right">
        <div class="nine"></div>
        <div class="nine"></div>
        <div class="nine"></div>
    </div>
</div>

CSS

.main {
width:100%;
float:left;
height:1%;
}
.child {
    width:50%;
    float:left;
}
.four {
    width: 96%;
    float:left;
    height: 150px;
    background:#35a;
    margin: 2% 0;
}
.nine {
    width:96%;
    float:left;
    height: 100px;
    background:#35a;
    margin: 2% 0;
}
.left {
    width:50%;
    float:left;
}
.right {
    width:33%;
    float:left;
}
Ramkumar
  • 13
  • 4
0

Result IMG

CSS:

.main-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: none;
    padding: 10px;
    width: 310px;
    height: 130px;
}
.first-for-containers {
  
}
.one-to-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: rgb(48, 61, 78);
}
.three-to-four {
    background-color: rgb(48, 61, 78);
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.element {
    color: white;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    border: 1px solid;
    padding: 2px 8px;
    width: 80px;
    height: 57px;

}
.elements {
    color: white;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    border: 1px solid;
    padding: 2px;
    width: 36px;
    height: 36px;
}
.last-nine-container{
    width: fit-content;
}
.last-nine {
    background-color: rgb(48, 61, 78);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="table.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="main-container">
        <div class="first-for-containers">
        <div class="one-to-two">
            <div class="element">1</div>
            <div class="element">2</div>
        </div>
        <div class="three-to-four">
            <div class="element">3</div>
            <div class="element">4</div>
        </div>
        </div>
        <div class="last-nine-container">
        <div class="last-nine">
        <div class="elements">5</div>
        <div class="elements">6</div>
        <div class="elements">7</div>
        <div class="elements">8</div>
        <div class="elements"></div>
        <div class="elements"></div>
        <div class="elements"></div>
        <div class="elements"></div>
        <div class="elements"></div>
        </div>
    </div>
</body>
</html>
Daniel Cojocaru
  • 1
  • 1