Perfecting the Grid Structure

HTML & CSS
21

Just these 2:

grid-template-columns: 20% 20% 20% 20% 20%
grid-template-rows: 33% 33% 33%
22

20% columns are 1/5th of the total width
And 33% rows are 1/3rd of the total height

You cannot always get full accuracy though when using pixel units

23

20% doesn’t look correct here:

24

Put it back to fractional units. Those are a recent CSS development purposely designed because of problems with percentage and pixel units.

25

Why is this wrong, look?
grid-template-columns: 50px 50px 50px 50px 50px;

Why is 50px not the right size?

26

Because math doesn’t work in that way.

27

What I’m looking at, nothing is uneven.

28

I’m serious about that too.

You have 5 boxes at 50 pixels = 250px
3px borders on each side (325) = 30px
4px gap between boxes (4*4) = 16px

250+30+16 adds up to more than 266 pixels.

Math doesn’t allow them to add up to 266 pixels or less.

29

The blue square boxes are 50px exact.

30

You’re being too specific and failing to allow the web browser to take care of the details for you.

I gave you a good, reliable, and flexible solution before.
You are now experiencing pain from failing to use that solution.

31

Have you tried border-box yet

.nav a {
  float: left;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  color: transparent;
  background: blue;
 
}
32

Does that work with grids?

33

I just did a live edit and it seemed to fix the bottom right box

1 Like
34

My recommendation is to let the grid manage things for you.

.nav {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 12px 4px;
}
35

Here:

36

And here too

37

Look at mine:

Here:

38

The 50px width and height can be deleted along with the box-sizing, and everything still works perfect without them.

1 Like
39

Which, like you mentioned is the whole reason for letting the grid control it. :slight_smile:

2 Likes
40

Border box can go too.
box-sizing: border-box;

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