CSS Grid макет для формы - PullRequest
Новая
       18

CSS Grid макет для формы

0 голосов
/ 17 мая 2019

У меня есть div с именем main-filter, и внутри div у меня есть два div.Теперь я хочу создать форму с кнопкой, надписями и вводом, и я хочу поместить два div внутри формы, и это должно выглядеть как на скриншоте ниже.У меня есть код HTML и CSS, но он не работает, и я не мог понять, как это сделать с помощью сетки CSS.Я должен сделать это отзывчивым!Я абсолютно новичок в сетке CSS, и любая помощь будет высоко ценится.Спасибо. 

   <div className="main-filter">

   <form onSubmit={this.addItem}>
   <div className="main-header__left">
    <label  className="start-timestamp">Start Timestamp: </label>

     <input
                    type="text"
                    ref={(input4) => this.input4 = input4}
                    className="input-item"
                    id="addInput3"
                    placeholder="Ex. 2019-1-12"
                  />
  <label  className="source-ip-address">Source IP Address: </label>
    <input
                    type="text"
                    name="source"
                    ref={(input1) => this.input1 = input1}
                    className="input-item"
                    id="addInput3"
                    placeholder="127.0.0.1 "

                  />

    <label  className="service">Service Name: </label>
    <input
                    type="text"
                    name="service"
                    ref={(input3) => this.input3 = input3}
                    className="input-item"
                    id="addInput3"
                    placeholder="Ex. Facebook or Whatsapp *" 
                    required
                  />


    </div>


    <div className="main-header__right">
    <label  className="end-timestamp">End Timestamp: </label>
    <input
                    type="text"
                    ref={(input5) => this.input5 = input5}
                    className="input-item"
                    id="addInput3"
                    placeholder="Ex. 2019-1-12"

                  />

  <label  className="destinatin-ip-ddress">Destination IP Address: 
  </label>
    <input
                    type="text"
                    name="destination"
                    ref={(input2) => this.input2 = input2}
                    className="input-item"
                    id="addInput3"
                    placeholder="127.0.0.1 "

                  />


  <button type="submit" className = "filter-button1">Apply 
  Filters</button> 


    </div>


   </form>



  </div>


.main-filter {
 display: flex;
 margin: 0px;
 padding: 20px;
 height: 90px; 
 background-color:#eff0f2;
 color: #287993;
 margin-bottom: 3rem;
 }

.main-header__left{
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 0.3em 0.6em;
grid-auto-flow: dense;
align-items: center;
float: left;
margin-left: 250px;
margin-right:200px;


}

.main-header__right{
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 0.3em 0.6em;
grid-auto-flow: dense;
align-items: center;
float:right;

 }
 .filter-button1{
  background: #38acd2;
  color: #FFFFFF;
  max-width: 380px;
  min-width: 370px;
  min-height: 35px;
  font-weight: bold;


} 
  input,
  button {
  grid-column: 2 / 4;
  width: auto;
  margin: 0;

  }

  input{
  width: 370px;
  height: 30px;
  border: 1px solid #38acd2;
  }

форма сетки css Скриншот изображения

1 Ответ

0 голосов
/ 17 мая 2019

Попробуйте использовать приведенный ниже код, я изменил код HTML и CSS, надеюсь, это поможет вам достичь ожидаемого результата. 

.main-filter {
  /* margin: 0px; */
  /* padding: 20px; */
  height: 90px;
  background-color: #eff0f2;
  color: #287993;
}

form {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 15px;
}

.main-header__left>div,
.main-header__right>div {
  display: flex;
}

.main-header__left>div>label,
.main-header__right>div>label {
  width: 40%;
}

@media only screen and (max-width: 500px) {
  /* .main-header__left {
    grid-area: 2 / span 1;
    grid-gap: 0;
  } */
  .main-header__right {
    grid-area: 2 / span 1;
    grid-gap: 0;
  }
}

.filter-button1 {
  background: #38acd2;
  color: #FFFFFF;
  min-height: 35px;
  font-weight: bold;
  border: none;
  margin-top: 18px;
  width: 100%;
}

input {
  width: 100%;
  height: 30px;
  border: 1px solid #38acd2;
}
<div className="main-filter">

  <form onSubmit={this.addItem}>
    <div class="main-header__left">
      <div>
        <label class="start-timestamp">Start Timestamp: </label>
        <input type="text" />
      </div>
      <div>
        <label className="source-ip-address">Source IP Address: </label>
        <input type="text" name="source" />
      </div>
      <div>
        <label className="service">Service Name: </label>
        <input type="text" name="service" />
      </div>
    </div>

    <div class="main-header__right">
      <div>
        <label className="end-timestamp">End Timestamp: </label>
        <input type="text" />
      </div>
      <div>
        <label className="destinatin-ip-ddress">Destination IP Address:</label>
        <input type="text" name="destination" />
      </div>

      <div>
        <label></label>
        <button type="submit" class="filter-button1">Apply Filters</button>
      </div>
      
    </div>
    
  </form>
</div>
...