https://codepen.io/veryeager/pen/KOKjOz My survey form project is just getting started and I’m having trouble with the CSS grid. I don’t want all the extra space between the backgrounds, like there is between the title and description. Any ideas?
I assume that you mean the green background-color. I tried 4 gap properties with no change in code-pen. Checking the CSS reset under the gear icon is the only thing that made a difference. Wonder if there is a codepen problem? Could you post your code in a free online host to see if there’s a difference?
The space between the title and description (h1 and p) is from the default margin on the elements. You can set them both to zero (I think that is what you were asking about anyway).
#title {
margin: 0;
}
#description {
margin: 0;
}
@tlc35us Not sure if you are talking about the form grid row? If so that is because of the 1fr set for the rows. The form row is the same size as the largest of the 4 grid rows. You can test it by increasing/decreasing the font-size on the h1. It is a bit easier to see after the default margin has been removed.
Setting the margin to zero almost worked, but the text is now not vertically centered. Placing a <div> tag around each grid elements works, though. I don’t think that it’s a Code Pen problem because I just used it to post the code for you to see. The original problem came up while editing in Notepad++ and viewing it in Firefox, Chrome, and MS Edge. Thank you all for your help.
Best I could do with just the CSS.
Maybe just do a grid with form elements. Or a start a grid within the third row if it doesn’t enlarge the previous rows. Check out the pen.
It was not vertically aligned before, it just had the same amount of top and bottom margin.
You can use align-items: center; on the grid container to align all grid items or you can use align-self: center; on individual grid items.
We need to see your code to be able to help, update the Codepen with your new code and if you have any specific questions you can post them here.
The align-items and align-self options did vertically center the element, but the unwanted margins are back.
I just updated the code in Code Pen.
There are no margins. I think you are misunderstanding the use of the fr unit. You are making all the rows as tall as the row with the most vertical content.
Try removing the grid-template-rows declaration, is that the layout what you want?
It’s your grid display.
Just remove these line from your #main-grid css
display: grid;
grid-template-rows: 1fr 1fr 1fr;
Is there a reason you are using grid display?
Also, can I suggest you keep some spacing between lines? It will really help with readability.
Ok, so CSS grid is uncalled for here. Lesson learned. I do plan on keeping space between lines, It’s the space between the element borders I don’t want. The colors at this point are just to show the spacing between the elements. I plan to change a lot about the appearance as the project progresses, this is the early layout stage.