0

I have the following HTML and CSS as shown at the end.

If I remove all reference to the gridImages class (in both HTML and CSS, and directly refer to .area1 thru .area5), all works as expected (that is the images are displayed, with one in the middle and the others surrounding it).

But when I use the the HTML/CSS as shown the images are displayed in a line down the screen.

It appears that the CSS is working though as the opacity (on hover and not), rotate (on hover) etc. all work as expected.

It just looks like the 'display: grid' no longer works when you use the div class in the way I am.

Any ideas what I am doing wrong?

Thank you.

* {
 box-sizing: border-box;
 margin: 0;
}

body {
 background: #9A9696;
 margin: 10px;
}

body {
 display: grid;
 grid-template-columns: repeat(6, 125px);
 grid-template-rows: repeat(6, 125px);
 grid-template-areas: 
  "area1 area1 ..... ..... area2 area2"
  "area1 area1 ..... ..... area2 area2"
  "..... ..... area3 area3 ..... ....."
  "..... ..... area3 area3 ..... ....."
  "area4 area4 ..... ..... area5 area5"
  "area4 area4 ..... ..... area5 area5";
 justify-content: center;
}

.gridImages img {
 /* display: grid;*/ 
 background: #DE6449;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
 opacity: 0.5;
 margin: auto;
 transition: 250ms; /* this allows a smooth "unhover" */
}

.gridImages img:hover {
 opacity: 1.0;
 transform: rotate(-10deg);
 bottom: 50px;
 transition: 250ms;
}



.area1 {grid-area: area1;}
.area2 {grid-area: area2;}
.area3 {grid-area: area3;}
.area4 {grid-area: area4;}
.area5 {grid-area: area5;}
<div class="gridImages">
  <img class="area1" src="https://source.unsplash.com/248x248">
  <img class="area2" src="https://source.unsplash.com/249x249">
  <img class="area3" src="https://source.unsplash.com/250x250">
  <img class="area4" src="https://source.unsplash.com/251x251">
  <img class="area5" src="https://source.unsplash.com/252x252">
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Graham
  • 129
  • 1
  • 8
  • Grid properties work only between parent and child. – Michael Benjamin Oct 29 '19 at 23:48
  • Thanks Michael. Understand that now, but it does not help me with the CSS, I want to contain the this part of the layout in a div, as I will have other div's for this like header and footer so, to me, it seems sensible to groups the 'body' elements together, but this seems to 'break' the grid. Back to Google :-). Thanks again. – Graham Oct 30 '19 at 09:32
  • Got it. I put the grid stuff in .gridImages and leave it out of body. Now just have to work out how to add a header and footer. Thanks again. – Graham Oct 30 '19 at 10:02
  • Try nested grid containers. Grid items can also be grid containers. (Same concept applies to flex.) – Michael Benjamin Oct 30 '19 at 10:59

0 Answers0