How can I make input tag longer in grid system?-CodePudding

I'm new to HTML and I am having a problem learning grid system in css. The first image is what I have made with simple label and input tags. However, I want to make the second input longer since it's where you type your email address. I tried including col-sm-12 but it doesn't seem to work. The ideal look would be the second image. Any help?

<div >
<div >
    <label  for="form-phone" >phone #</label>
    <div >
        <input type="text"  id="form-phone" name="phone" placeholder="" autocomplete="off">
    </div>
</div>

<div >
    <label  for="form-mail" >E-mail</label>
    <div >
        <input type="text"  id="form-mail" name="mail" placeholder="" autocomplete="off">
    </div>
</div>

<div >
    <label  for="form-money" >money</label>
    <div >
        <input type="text"  id="form-money" name="money" placeholder="" autocomplete="off">
    </div>
</div>

first image

second image

CodePudding user response：

Okay, so col-sm-12 is the part of a framework called Bootstrap. What you want to do in the grid system, is when you want to spread them, you can always use grid-template-columns where you specify how many columns do you want, and put width, or you can put automatic width over 1fr which takes 1 fraction of the screen. With your example, you can put 4 column, and you have 3 inputs, so you can put colspan on the email input I think, and that would make it larger than the other inputs. Anyways, on the bootstrap, which you mentioned with col-sm-12, 1 row has 12 spaces(call it that), if you want to put some larger than the other, you would go with 1 div being col-sm-3, the middle one would be col-sm-6, and the last one would be col-sm-3, which adds up to 12, if you understand. Feed free to ask in comments more.

.grid{
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
#spread{
    grid-column: 2 / span 2;
}

<form action="" >
        
        <input type="text" name="" id="">
        <input type="text" name="" id="spread">
        <input type="text" name="" id="">
    </form>

It looks something like this

CodePudding user response：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div >
  <div >
    <label for="form-phone" >phone #</label>
    <div >
      <input type="text"  id="form-phone" name="phone" placeholder="" autocomplete="off">
    </div>
  </div>

  <div >
    <label for="form-mail" >E-mail</label>
    <div >
      <input type="text"  id="form-mail" name="mail" placeholder="" autocomplete="off">
    </div>
  </div>

  <div >
    <label for="form-money" >money</label>
    <div >
      <input type="text"  id="form-money" name="money" placeholder="" autocomplete="off">
    </div>
  </div>
</div>

just add col-6 in <div >

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div >
<div >
    <label  for="form-phone" >phone #</label>
    <div >
        <input type="text"  id="form-phone" name="phone" placeholder="" autocomplete="off">
    </div>
</div>

<div >
    <label  for="form-mail" >E-mail</label>
    <div >
        <input type="text"  id="form-mail" name="mail" placeholder="" autocomplete="off">
    </div>
</div>

<div >
    <label  for="form-money" >money</label>
    <div >
        <input type="text"  id="form-money" name="money" placeholder="" autocomplete="off">
    </div>
</div>
</div>