CODEWITHSUNDEEP
csscss-gridgrid-layout
Dani Amsalem
Dani Amsalem

Reputation: 1616

How to solve alignment issue on CSS Grid Critters 9.3

Need help solving CSS Grid Critters 9.3

I can get the grid template lines to fit correctly, but the bottom row of items won't line up.

CSS Grid Critters 9.3 Problem

Here's what I've got:

planet {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 50% auto;
  justify-content: space-evenly;
  justify-items: end;
  align-content: space-between;
}

But bottom row doesn't seem to fit. Tried applying styling to

dunes {}

and

water {}

But that just messed up the top row. Struggling going back and forth between lessons to no avail.

Upvotes: 3

Views: 361

Answers (1)

Dani Amsalem
Dani Amsalem

Reputation: 1616

Finally, after reviewing previous lessons, it struck me. I needed to test out the align-items property.

This solution worked!

planet {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 50% auto;
  justify-content: space-evenly;
  justify-items: end;
  align-content: space-between; /***this is the key***/
}

It turns out, that justify-content and align-content work together to control the space around content items aka "boxes" or "tracks". By default, justify-content handles left/right space whereas align-content handles top/bottom space.

On the other hand, justify-items and align-items control the actual position of the items inside the boxes or tracks. It's worth mentioning that align-items throws off the position of the top row, so don't use it. Justify-items fixes the top row without throwing off the bottom row.

Grid Critters 9.3 Solved

Upvotes: 4

Related Questions