HTML Form - Issue using CSS grid for some elements

Hi all, I am having issues with getting the elements to fit in the CSS grid appropriately. This is my project https://codepen.io/slavenoptimus/pen/zPPLNL

Most elements appear as I understand that they should, but fieldset and button should span through the whole row (that row should have only one column), but they don’t. I did use

.whole-row {
    grid-column: 1/3;
}

but no change…

Another thing is with the checkboxes… But this ‘whole row’-thing is kinda puzzling me atm… Any advice is appreciated

I would take short tutorial on CSS Grid. This one is a good one. https://cssgridgarden.com/

To span an entire row, you need grid-column: 1/ -1. -1 means go till the end.

You need to give .whole-row width of 100% (and probably also to the elements inside of it)

Thanks for the gardening tip @shimphillip :slight_smile: But I would say that it is the same thing if I put -1 or 3, cause it references the same grid line. The problem is that the element is not spanning over both columns either way.
@jenovs I believe that is not the solution for getting the grid to work properly. But thanks for the tip

watch this.

Grid by example:

Your grid works properly. You have an element which is justified to the end (right). If you want that element to span the whole 1 / 3 region of the grid you should give it a width of 100%;

2 Likes

you are not far off. you have justify-items: end set on your grid container so all grid items will be flushed to the right. NOTE: that block items will by default take up width: auto space, that is the width of their content.

if you set justify-self: start on the grid item in question you will see the fieldset move to the left and if you set width: 100% or similar your fieldset will take up the whole row.

1 Like

you beat me to it…

Thanks @rekurzion and @jenovs! I understood where my mistake was thanks to your suggestions. I was trying to use the least possible number of divs, so the grid way of doing things requires some time getting used to…
The page already looks better, but still needs some work :slight_smile: Cheers