I *love* CSS Grid... and yet I am struggling with it

I *love* CSS Grid... and yet I am struggling with it
0
#1

And willing to offer up my own project to be dissected:

First I would start by saying against so many other ‘wacky’ standards I feel the concept and implementation of CSS Grid just makes so much ‘sense’.

However, I have had some problems even though ‘caniuse.com’ says this should be very widely accepted.

I guess my first question is, I can get these images to line up great horizontally, but not vertically, and I don’t get it…

I’ve even tried changing the row size to match and it seems to have no effect-- Where is the ‘border’ coming from ?

Second I guess is a much deeper HTML question I still have, or for example ‘#greenButton’ is a Div with Div.

I can position this where I want with ‘absolute’, yet that also seems relative to the whole damn screen.

Thus, even within CSS Grid, I am wondering what is the right way to tell an object, text, image, whatever you belong in this certain spot of a grid space relative to the master ?

#2

I assume you’re talking about the white space between your grid rows. If you change the display property of your images to block, it will go away.

The space underneath is apparently there to account for descenders in text. Since text is inline and images are inline by default, both of them get some space underneath in case they have descenders. Changing the display property in CSS removes that additional space.

I found this great post that explains the issue in more detail: https://mor10.com/removing-white-space-image-elements-inline-elements-descenders/

#3

Dear raddevon,

Yes, I think that completely addresses that. On purpose I’ve also made the desired button at an exaggerated location, and perhaps only additionally am asking-- Say I have this defined ‘Grid’ and then I want to stuff something into just the right place for my grid element… How do I do that ?

My first thought was that I could use ‘position:relative’ and where ever I put it should be relative to the div that contains it… But that doesn’t seem to work.

#4

@abalducci abalducci

One option is to use margins, I played around with your code a bit. I deleted the ‘position: relative’ style from #greenButton and I added the following:

 #greenButton {
  grid-column: 2;
  grid-row: 1;
  margin-left: 58px;
  margin-top: 49px;
}

I think you were trying to position that overtop of the upper left quadrant’s space? Usually the margin properties are best for making slight changes to an element’s position. You just have to be careful to make sure your element doesn’t have any “extra space” or it could affect the position of other elements in your DOM/page. As far as your position relative not working, I think that was just because it was “relative” to the upper left-hand corner of your grid instead of relative to the div which contains the upper left quadrant. I hope that helps, let me know if I have misinterpreted anything.

#5

Dear CodeJord,

Thanks that makes a lot of sense, and when the window is adjusted is no longer ‘floating around’. Even still I have to ask myself ‘who came up with this stuff’ !

Somethings are really interesting, other things, as they say, feel like putting a lot of make-up on a pig. But, Thanks.