Make width of child to auto in grid-CodePudding

I have a form with two columns grid layout. How do I make the width of the submit button to its original/auto width? So far its width is equal to 50% because of minmax(0px, 1fr).

I have tried to set the width of the button to be width: auto; but it doesn't work.

form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  background-color: green;
  width: 50%;
}

input:last-child {
  width: auto;
}

<form>
  <input placeholder="First Name" type="text" name="first_name" required>
  <input placeholder="Last Name" type="text" name="last_name" required>
  <input type="submit" value="Submit"> 
</form>

CodePudding user response：

Change to width: fit-content

form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  background-color: green;
  width: 50%;
}

input:last-child {
  width: fit-content;
}

<form>
  <input placeholder="First Name" type="text" name="first_name" required>
  <input placeholder="Last Name" type="text" name="last_name" required>
  <input type="submit" value="Submit"> 
</form>

CodePudding user response：

form {
  background-color: green;
  width: 50%;
}

input:last-child {
  width: 100%;
}
#first_name,#last_name{
width:95%;
}

<form>
<table>
<tr>
<td><input placeholder="First Name" type="text" name="first_name"  id="first_name" required></td>
<td> <input placeholder="Last Name" type="text" name="last_name" id="last_name" required></td>
</tr>
<tr>
<td colspan="2">  <input type="submit" value="Submit" > </td>
</tr>
  </table>
</form>

its working responsively,Use table for responsive design,Thanks