Grid on my Form

HTML-CSS
1

Hi,

Would somebody mind taking a look at my survey form please?

I don’t understand why my elements won’t layout in the grid I’m trying to get them into…

https://codepen.io/daz1uk/pen/qKKrGM

2

i am assuming you are talking about the ul.input section.
try this code:

ul.input {
    display: grid;
    grid-template-columns: 100px fit-content;
  grid-template-rows: auto;
    background-color: yellow;
}
3

you may also want to put your labels after your checkboxes/radio buttons so that they appear in the correct left-to right order.

4

Thank you for the advice, I will try it out.

5

I’ve changed it completely, the html & css.

I would expect everything to layout properly now, but still issues with grid.

The next row is floating up along side instead of the labels and inputs separating into respective columns?

Does anyone know what is wrong here please? I seem to banging my head against a brick wall with this :slight_smile:

https://codepen.io/daz1uk/pen/qKKrGM

6

Hmmm… I don’t think I’m seeing the same thing. Can you post s screen shot?

7

Hi

Because you have wrapped sections of your html in <div class="row"> your grid rules are not applied to .input or .label. Grid items must be direct children of the grid container.

You could remove the <div class="row"> or make <div class="row"> the grid container.

Here is an example of using <div class="row"> as the grid container. Each question is wrapped in a row div. Drag the window divider to watch it restack for smaller screen.
https://jsfiddle.net/alhazen1/umo2cj63/6/

There are probably more elegant solutions that don’t require a media query to be responsive but this looked like it would fit what you already had.

Good luck

1 Like
8

Hi,

Sorry, I’ve not been on for a couple of days. Thanks for this explanation, it is much appreciated.

1 Like