Should I put different <div>?

HTML-CSS
1

https://codepen.io/knndy-j/pen/rgzXKz

Should I put different div each input? I cant seem to align the text on the input boxes on the center…

2

Well, you are using grid so you can make a two column layout.

form {
  display: grid;
  grid-template-columns: min-content min-content;
  justify-content: center;
  align-items: center;
  grid-gap: 20px;
}

You should add labels for the associated input text

<form id="survey-form">
  <label for="name">Name:</label>
  <input id="name" type="text" name="Name" placeholder="Enter your name">
</form>

That will also give you the option to align the label text.

label {
  justify-self: end;
}
3

sir @lasjorg why do you put two min-content in it?

4

In this case, I just found that it made it a bit quicker and easier to center things. You can try and change it to 1fr 1fr and see what happens.

Now that you have some long running text you can also try using max-content for the first column and see how that affect the layout.

grid-template-columns: max-content min-content;

More on min and max content

As practice, you might just want to try doing the layout using different techniques. There is a lot of ways to achieve the same layout using CSS grid. The form project is actually pretty good for practicing CSS grid because of the well define boxes there is to work with.


1 Like
5

Run the code to see why @knndy-j

1 Like