Can I please get som help? I am stuck on moving items in a grid, and making the grid

Can I please get som help? I am stuck on moving items in a grid, and making the grid
0.0 0

#1

I cannot seem to be able to use the grid-column to move the items in the second and third section. I am also having issues with my third section, but if someone could help me understand how to move the items in one section, I would be able to move the other. My third section seems really cluttered. What would be the best way to handle this? Any help would be greatly appreciated.
I am not sure if I am putting the code pen in here correctly.

See the Pen dKzBrY by Anthony Aldea (@aaldea) on CodePen.


#2

Some issues I notice (some related to your problem and some don’t):

  • Your grid rows are of fixed size but your form’s height is much larger than the rows’ heights, this makes the rows kind of useless. In Firefox if you selector the <main> element in the Inspector (F12), there is an option that lets you see the grid lines, which may help
  • You don’t have to add grid: display to grid items, unless you want them to be grids, too
  • The reason that you can’t move parts of the form (I assume you are referring to the <fieldset> elements) is because they are not inside a the same grid as <form>—they are all children of <form>, which has display: grid but not actual grids defined with grid-template-rows… etc.
  • I think using Flexbox to position <fieldset>s inside the <form> may be a better option. It’s entirely up to you though

I think it’s worthwhile drawing your design on paper, or mock it up with a program, before coding it—particularly if you can’t always translate your mental model exactly with code.

I hope that helps!


#3

Thank you, I think it does. So, you would recommend that I edit the forms height? Would that just be like

height: 200px;

or something of that nature?
When you say that the fieldsets are children, I can add the grid-template rows to it and that would help?

I will look at flexbox I was a little confused on it, but I will take a look and see if I can figure it out now. I think I should put the flexbox into the primary fieldset?

Thanks again. This is a good starting off point!!!