Perfecting the Grid Structure

HTML & CSS
41

Looks like you could loose the float too

.nav a {
  color: transparent;
  background: rgba(0, 0, 0, .2);
  border: 3px solid #0059dd;
}
1 Like
42

Yes, the float was only useful when the grid wasn’t being used. It’s ignored with the grid, as the grid does a much better job of controlling things for you.

43

Overflow isn’t needed either now because that was only used when I was using float, correct?

overflow: hidden;

Or am I wrong?

.wrape {
  position: relative;
  width: 266px;
  height: 174px;
  margin-top: 8px;
  overflow: hidden;
}
2 Likes
44

Several versions ago it was also being used to hide the bottom margins on the floats.
Your fixed width and height on the wrapper was essentially containing the floats too.

We had overflow in there to future proof it. (in case changes were made )

1 Like
45

Yes, it just stacks the children like blocks from one column/row to the next

1 Like
46

Want to see something truely cool? An awesome image-grid tutorial (#8 in the list) that properly handles different sized images.

1 Like
47

Do I need t use any of these?

48

You already are.

49

I am, where?

50

You are using the two axis of grid layout.
Aligning and justifying aren’t relevant because you want the link boxes to fully take up the space.
Centering is of no use for you either.
Aligning and justifying could use space-between, but it has no effect on your layout.

So you are already using all of it that is useful do you.

2 Likes
51

specifying

margin:0;
padding:0;

Isn’t either?

.nav {
  display: grid;
   height: 100%;
}

It’s not needed?

52

Margin maybe, but that’s already handled by the wrap.
Padding is already handled with the grid-gap.

53

@Ray.H may know whether margin needs to be added, or @PaulOB would know.

54

Those were used on the original <ul> to remove default margins and paddings.

No longer needed

1 Like
55

Thanks.

1 Like
56

There’s a huge issue I just spotted.
@Ray.H

Click the white space below the links image.

How do I fix that?

57

Just change the height.

58

There’s nothing wrong with the height.

There shouldn’t be 2 scrol bars:

59

Yes there is - you saw it yourself.

60

There also shouldn’t be that gap below the vertical lines.