0

I wanna create a grid for my projects, I have a div that I wanna fill (height and width). This grid should be responsive and adaptable to smartphone, tablet and small screens.

This is an example of what I would like to do:

enter image description here

I tried to create the first row but I can't understand how to manage the height of the row:

<html>
<head>
<style> 

#proj1 {
    background-image: url("immobiliare.jpg");
    width:25%;
    float:left; 
    min-height: 150px;
}

#proj2 {
    background-image: url("immobiliare.jpg");
    width:25%;  
    float:left;
    min-height: 150px;
}

#proj3 {
    background-image: url("immobiliare.jpg");
    width:25%;  
    float:left; 
    min-height: 150px;
}

#proj4 {
    background-image: url("immobiliare.jpg");
    width:25%;  
    float:left; 
    min-height: 150px;  
}


</style>
</head>
<body>
<div class="contenitor-projects">
    <div class="row1-projects">
        <div id="proj1">Progetto 1</div>
        <div id="proj2">Progetto 2</div>
        <div id="proj3">Progetto 3</div>
        <div id="proj4">Progetto 4</div>
    </div>
</div>  
</body>
</html>

enter image description here

Crashy
  • 335
  • 2
  • 8
  • 27

1 Answers1

1

Use flex to get the same

Just add some css i posted a snippet 

.row1-projects {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
}

#proj1 {
  background: url("http://lorempixel.com/400/200") center center no-repeat;
  background-size: cover;
  flex: 1 0 25%;
  /* add this */
  min-height: 150px;
  margin: 3px;
  /* add this */
}

#proj2 {
  background: url("http://lorempixel.com/400/200") center center no-repeat;
  background-size: cover;
  flex: 1 0 25%;
  /* add this */
  min-height: 150px;
  margin: 3px;
  /* add this */
}

#proj3 {
  background: url("http://lorempixel.com/400/200") center center no-repeat;
  background-size: cover;
  flex: 1 0 25%;
  /* add this */
  min-height: 150px;
  margin: 3px;
  /* add this */
}

#proj4 {
  background: url("http://lorempixel.com/400/200") center center no-repeat;
  background-size: cover;
  flex: 1 0 25%;
  /* add this */
  min-height: 150px;
  margin: 3px;
  /* add this */
}
<div class="contenitor-projects">
  <div class="row1-projects">
    <div id="proj1">Progetto 1</div>
    <div id="proj2">Progetto 2</div>
    <div id="proj3">Progetto 3</div>
    <div id="proj4">Progetto 4</div>
    <div id="proj1">Progetto 1</div>
    <div id="proj2">Progetto 2</div>
    <div id="proj3">Progetto 3</div>
    <div id="proj4">Progetto 4</div>
  </div>
</div>

2nd option which fill the view port as you want.

  body, html {
margin:0px;
padding: 0;
}
.contenitor-projects {

  height:100vh;
}
.row1-projects {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-flow:row wrap;
}

#proj1 {
background: url("http://lorempixel.com/400/200") center center no-repeat;
background-size:cover;
flex:1 0 25%; /* add this */
height:calc(100vh / 3);
margin:3px; /* add this */
}

#proj2 {
background: url("http://lorempixel.com/400/200") center center no-repeat;
background-size:cover;
flex:1 0 25%; /* add this */
height:calc(100vh / 3);
margin:3px; /* add this */
}

#proj3 {
background: url("http://lorempixel.com/400/200") center center no-repeat;
background-size:cover;
flex:1 0 25%;  /* add this */
height:calc(100vh / 3);
margin:3px; /* add this */
}

#proj4 {
background: url("http://lorempixel.com/400/200") center center no-repeat;
background-size:cover;
flex:1 0 25%;  /* add this */ 
height:calc(100vh / 3); 
margin:3px; /* add this */
}
<div class="contenitor-projects">
  <div class="row1-projects">
    <div id="proj1">Progetto 1</div>
    <div id="proj2">Progetto 2</div>
    <div id="proj3">Progetto 3</div>
    <div id="proj4">Progetto 4</div>
    <div id="proj1">Progetto 1</div>
    <div id="proj2">Progetto 2</div>
    <div id="proj3">Progetto 3</div>
    <div id="proj4">Progetto 4</div>
  </div>
</div>
LKG
  • 4,152
  • 1
  • 11
  • 21
  • If I want to remove "min-height: 150px;" is it possible? Because I would like to fill also the height of the div, not only the weight. Is it possible to make flexible also the height? – Crashy Jun 14 '17 at 10:36
  • You are using image in css so you have assign a height for visible images if you need fill the div use `height:100%;` or `height:100vh;` – LKG Jun 14 '17 at 10:42
  • I would like to fill the div with the background image, I tried to put height: 100%; but the div get the height of the content so it is very thin. I updated my answer with the screenshot of my webpage, I would like to fill the space in horizontally and in vertically. – Crashy Jun 14 '17 at 11:01
  • Check my update answer – LKG Jun 14 '17 at 12:48
  • Thanks is perfect! – Crashy Jun 14 '17 at 20:52