Highlighted

need help with image grid

Contributor ,
Jan 16, 2020

Copy link to clipboard

Copied

Hello,

I am building a simple image grid and one of the the divs is getting pushed down due to the height of the div next to it. How can I get it to move up like the image attached? If you view my code you will see how it's pushed down. 

 

Thank you for any help.

 

blocks.png

 

 

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
 
  <style>
	.grid {
  background: white;
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] {
  float: left;
}

.col-1-1 {
  width: 100%;
}

.col-3-4 {
  width: 75%;
}

.col-2-3 {
  width: 33.33%;
}

.col-1-3 {
  width: 66.66%;
}

.col-1-2 {
  width: 50%;
}

.col-1-4 {
  width: 25%;
}

.col-1-8 {
  width: 12.5%;
}
.module {
 
  margin: 10px;
  height: auto;
  text-align: center;
}


@media (max-width: 800px) {
  .tab-1-1 {
    width: 100%;
  }

  .tab-3-4 {
    width: 75%;
  }

  .tab-2-3 {
    width: 66.66%;
  }

  .tab-1-3 {
    width: 33.33%;
  }

  .tab-1-2 {
    width: 50%;
  }

  .tab-1-4 {
    width: 25%;
  }

  .tab-1-8 {
    width: 12.5%;
  }
}
@media (max-width: 400px) {
  [class*='col-'] {
    width: 100%;
  }
}</style>

</head>
<body>
<!-- partial:index.partial.html -->
<div class='grid'>
  <div class='col-2-3 tab-1-1'>
    <div class='module'><img style="width:100%" src="https://campaigns.premierinc.com/images/content/191125_TML_PioneersTest_272_COMP.jpg"></div>
  </div>
  <div class='col-1-3 tab-1-2'>
    <div class='module'><img style="width:100%" src="https://campaigns.premierinc.com/images/content/191125_TML_PioneersTest_123_COMP.jpg"></div>
  </div>
  <div class='col-2-3 tab-1-1'>
    <div class='module'><img style="width:100%" src="https://campaigns.premierinc.com/images/content/191125_TML_PioneersTest_272_COMP.jpg"></div>
	</div>
  <div class='col-1-1'>
    <div class='module'><img style="width:100%" src="https://campaigns.premierinc.com/images/content/city.jpg"></div>
  </div>
</div>


</body>
</html>

 

 

 

 

 

Adobe Community Professional
Correct answer by Jon_Fritz_II | Adobe Community Professional

You make it responsive by changeing the columns and rows of each element in the grid property of the .grid-container class inside a Media Query. For example, here's a quick one for 600 pixel width (I also added some artificial heights since I don't have images)...

<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grid</title>
<style>
* {
-webkit-text-size-adjust:100%;
-webkit-box-sizing:border-box;
box-sizing:border-box;
padding:0;
margin:0;
}
a img {
border:none;
}
img {
display:block;
}
.grid-container {
max-width:980px;
margin:0 auto;
display:grid;

/* each quoted set of grid-area names represents a row*/
/* each grid-area name represents the content the column in a row*/

grid:
"upperleft main main main"
"upperleftbottom main main main"
"bottom bottom bottom bottom";

/*you can space them out so they're easier to understand*/

grid-gap:6px;
background-color:orange;
}
.grid-container>div {
background-color:lightgoldenrodyellow;
}
.grid-container>div img {
max-width:100%;
}

/* use classes to give each grid-area an easy name to add to the grid property above */

.item1 {
grid-area: upperleft;
height:40vh;
}
.item2 {
grid-area: upperleftbottom;
height:40vh;
}
.item3 {
grid-area: main;
height:calc(80vh + 6px);
}
.item4 {
grid-area: bottom;
height:20vh;
}
@media screen and (max-width:600px) {
.grid-container {
grid:
"upperleft"
"upperleftbottom"
"main"
"bottom";
}

}
</style>
</head>

<body>
<div class="grid-container">
<div class="item1">
Upper Left
</div>
<div class="item2">
Upper Left Bottom
</div>
<div class="item3">
Main Area
</div>
<div class="item4">
Bottom
</div>
</div>
</body>
</html>

 

Topics

Code, How to

Views

638

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

need help with image grid

Contributor ,
Jan 16, 2020

Copy link to clipboard

Copied

Hello,

I am building a simple image grid and one of the the divs is getting pushed down due to the height of the div next to it. How can I get it to move up like the image attached? If you view my code you will see how it's pushed down. 

 

Thank you for any help.

 

blocks.png

 

 

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
 
  <style>
	.grid {
  background: white;
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] {
  float: left;
}

.col-1-1 {
  width: 100%;
}

.col-3-4 {
  width: 75%;
}

.col-2-3 {
  width: 33.33%;
}

.col-1-3 {
  width: 66.66%;
}

.col-1-2 {
  width: 50%;
}

.col-1-4 {
  width: 25%;
}

.col-1-8 {
  width: 12.5%;
}
.module {
 
  margin: 10px;
  height: auto;
  text-align: center;
}


@media (max-width: 800px) {
  .tab-1-1 {
    width: 100%;
  }

  .tab-3-4 {
    width: 75%;
  }

  .tab-2-3 {
    width: 66.66%;
  }

  .tab-1-3 {
    width: 33.33%;
  }

  .tab-1-2 {
    width: 50%;
  }

  .tab-1-4 {
    width: 25%;
  }

  .tab-1-8 {
    width: 12.5%;
  }
}
@media (max-width: 400px) {
  [class*='col-'] {
    width: 100%;
  }
}</style>

</head>
<body>
<!-- partial:index.partial.html -->
<div class='grid'>
  <div class='col-2-3 tab-1-1'>
    <div class='module'><img style="width:100%" src="https://campaigns.premierinc.com/images/content/191125_TML_PioneersTest_272_COMP.jpg"></div>
  </div>
  <div class='col-1-3 tab-1-2'>
    <div class='module'><img style="width:100%" src="https://campaigns.premierinc.com/images/content/191125_TML_PioneersTest_123_COMP.jpg"></div>
  </div>
  <div class='col-2-3 tab-1-1'>
    <div class='module'><img style="width:100%" src="https://campaigns.premierinc.com/images/content/191125_TML_PioneersTest_272_COMP.jpg"></div>
	</div>
  <div class='col-1-1'>
    <div class='module'><img style="width:100%" src="https://campaigns.premierinc.com/images/content/city.jpg"></div>
  </div>
</div>


</body>
</html>

 

 

 

 

 

Adobe Community Professional
Correct answer by Jon_Fritz_II | Adobe Community Professional

You make it responsive by changeing the columns and rows of each element in the grid property of the .grid-container class inside a Media Query. For example, here's a quick one for 600 pixel width (I also added some artificial heights since I don't have images)...

<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grid</title>
<style>
* {
-webkit-text-size-adjust:100%;
-webkit-box-sizing:border-box;
box-sizing:border-box;
padding:0;
margin:0;
}
a img {
border:none;
}
img {
display:block;
}
.grid-container {
max-width:980px;
margin:0 auto;
display:grid;

/* each quoted set of grid-area names represents a row*/
/* each grid-area name represents the content the column in a row*/

grid:
"upperleft main main main"
"upperleftbottom main main main"
"bottom bottom bottom bottom";

/*you can space them out so they're easier to understand*/

grid-gap:6px;
background-color:orange;
}
.grid-container>div {
background-color:lightgoldenrodyellow;
}
.grid-container>div img {
max-width:100%;
}

/* use classes to give each grid-area an easy name to add to the grid property above */

.item1 {
grid-area: upperleft;
height:40vh;
}
.item2 {
grid-area: upperleftbottom;
height:40vh;
}
.item3 {
grid-area: main;
height:calc(80vh + 6px);
}
.item4 {
grid-area: bottom;
height:20vh;
}
@media screen and (max-width:600px) {
.grid-container {
grid:
"upperleft"
"upperleftbottom"
"main"
"bottom";
}

}
</style>
</head>

<body>
<div class="grid-container">
<div class="item1">
Upper Left
</div>
<div class="item2">
Upper Left Bottom
</div>
<div class="item3">
Main Area
</div>
<div class="item4">
Bottom
</div>
</div>
</body>
</html>

 

Topics

Code, How to

Views

639

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Jan 16, 2020

Copy link to clipboard

Copied

Have you tried using CSS Grid?

It makes this much easier...

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Quick Grid</title>
<style>
* {
-webkit-text-size-adjust:100%;
-webkit-box-sizing:border-box;
box-sizing:border-box;
padding:0;
margin:0;
}
a img {
border:none;
}
img {
display:block;
}
.grid-container {
max-width:980px;
margin:0 auto;
display:grid;

/* each quoted set of grid-area names represents a row*/
/* each grid-area name represents the content the column in a row*/

grid:
'upperleft               main        main       main'
'upperleftbottom    main        main       main'
'bottom                   bottom    bottom    bottom';

/*you can space the above out so they're easier to understand using tabs or spaces*/

grid-gap:6px;
background-color:orange;
}
.grid-container>div {
background-color:lightgoldenrodyellow;
}
.grid-container>div img {
max-width:100%;
}

/* use classes to give each grid-area an easy name to add to the grid property above */

.item1 { grid-area: upperleft; }
.item2 { grid-area: upperleftbottom; }
.item3 { grid-area: main; }
.item4 { grid-area: bottom; }

</style>
</head>

<body>
<div class="grid-container">
<div class="item1">
Upper Left
</div>
<div class="item2">
Upper Left Bottom
</div>
<div class="item3">
Main Area
</div>
<div class="item4">
Bottom
</div>
</div>
</body>
</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Contributor ,
Jan 16, 2020

Copy link to clipboard

Copied

Hi John,

Thank you for the recommendation but this needs to be responsive to where the blocks drop like my example. Ideally I would just like to fix the code I have.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jan 16, 2020

Copy link to clipboard

Copied

You make it responsive by changeing the columns and rows of each element in the grid property of the .grid-container class inside a Media Query. For example, here's a quick one for 600 pixel width (I also added some artificial heights since I don't have images)...

<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grid</title>
<style>
* {
-webkit-text-size-adjust:100%;
-webkit-box-sizing:border-box;
box-sizing:border-box;
padding:0;
margin:0;
}
a img {
border:none;
}
img {
display:block;
}
.grid-container {
max-width:980px;
margin:0 auto;
display:grid;

/* each quoted set of grid-area names represents a row*/
/* each grid-area name represents the content the column in a row*/

grid:
"upperleft main main main"
"upperleftbottom main main main"
"bottom bottom bottom bottom";

/*you can space them out so they're easier to understand*/

grid-gap:6px;
background-color:orange;
}
.grid-container>div {
background-color:lightgoldenrodyellow;
}
.grid-container>div img {
max-width:100%;
}

/* use classes to give each grid-area an easy name to add to the grid property above */

.item1 {
grid-area: upperleft;
height:40vh;
}
.item2 {
grid-area: upperleftbottom;
height:40vh;
}
.item3 {
grid-area: main;
height:calc(80vh + 6px);
}
.item4 {
grid-area: bottom;
height:20vh;
}
@media screen and (max-width:600px) {
.grid-container {
grid:
"upperleft"
"upperleftbottom"
"main"
"bottom";
}

}
</style>
</head>

<body>
<div class="grid-container">
<div class="item1">
Upper Left
</div>
<div class="item2">
Upper Left Bottom
</div>
<div class="item3">
Main Area
</div>
<div class="item4">
Bottom
</div>
</div>
</body>
</html>

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Contributor ,
Jan 16, 2020

Copy link to clipboard

Copied

Awesome!!!! You rock! Thanks a bunch John. That is exaclty what I needed. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jan 16, 2020

Copy link to clipboard

Copied

Take some time to read up on Flexbox and CSS Grid. 

You can do all kinds of things with them that are insanely complex, or simply impossible, to do with floats/margin/padding layouts. They are required reading for anyone who wants to continue building websites into the future.

For example, with the layout above, you can add a simple "order" property to the grid items (.item1 through .item4)  to switch the order of their layout as the media queries switch. With floats/padding/margin layouts, that's not possible because it would require rewriting the html between media queries.

A good place to go for some of the basics on Grid is https://www.w3schools.com/css/css_grid.asp
I like this tutorial for Flexbox: https://internetingishard.com/html-and-css/flexbox/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Contributor ,
Jan 16, 2020

Copy link to clipboard

Copied

Hi again,

Can you look at my code? It seems the images aren't filling the container. Is there a way to do this?

 

 

<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grid</title>
<style>
* {
-webkit-text-size-adjust:100%;
-webkit-box-sizing:border-box;
box-sizing:border-box;
padding:0;
margin:0;
}
a img {
border:none;
}
img {
display:block;
}
.grid-container {
max-width:980px;
margin:0 auto;
display:grid;

/* each quoted set of grid-area names represents a row*/
/* each grid-area name represents the content the column in a row*/

grid:
"upperleft main main main"
"upperleftbottom main main main"
"bottom bottom bottom bottom";

/*you can space them out so they're easier to understand*/

grid-gap:15px;
background-color:#ffffff;
}
.grid-container>div {
background-color:lightgoldenrodyellow;
}
.grid-container>div img {
max-width:100%;
}

/* use classes to give each grid-area an easy name to add to the grid property above */

.item1 {
grid-area: upperleft;
height:40vh;
}
.item2 {
grid-area: upperleftbottom;
height:40vh;
}
.item3 {
grid-area: main;
height:calc(81.5vh + 6px);
}
.item4 {
grid-area: bottom;
height:20vh;
}
@media screen and (max-width:600px) {
.grid-container {
grid:
"upperleft"
"upperleftbottom"
"main"
"bottom";
}

}
</style>
</head>

<body>
<div class="grid-container">
<div class="item1"><img src="https://campaigns.premierinc.com/images/content/191125_TML_PioneersTest_287_COMP.jpg">
</div>
<div class="item2"><img src="https://campaigns.premierinc.com/images/content/191125_TML_PioneersTest_287_COMP.jpg">
</div>
<div class="item3"><img src="https://campaigns.premierinc.com/images/content/191125_TML_PioneersTest_123_COMP.jpg">
</div>
<div class="item4"><img src="https://campaigns.premierinc.com/images/content/city.jpg">
</div>
</div>
</body>
</html>

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Jan 16, 2020

Copy link to clipboard

Copied

To get the images to fit the containers you would have to use 'object-fit: cover;'

 

Example for the image in container item 1 (grid-area: upperleft;) add the css styles below to control the image for that container:

 

 

.item1 img {
height:40vh;
object-fit:cover;
}
@media screen and (max-width:600px) {
.item1 img {
width: 100vw;
height: auto;
}
}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jan 20, 2020

Copy link to clipboard

Copied

In addition to what Os suggests, you'll also want to remove the illustrative height settings I added to .item1 through .item4. They won't be necessary once you add images with the proper aspect ratios to those containers.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jan 16, 2020

Copy link to clipboard

Copied

I don't know why you're still using floats.  These kinds of problems are exactly what we hated about them and why we switched to CSS Flexbox and CSS Grids.  Maybe it's also worth mentioning that Bootstrap 4 replaced floats with Flexbox. 

 

 

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Learn Resources
Add a group