невозможно сделать один столбец в сетке CSS - PullRequest
Новая
       7

невозможно сделать один столбец в сетке CSS

0 голосов
/ 17 ноября 2018

У меня есть проект формы опроса от freecodecamp.org, и когда ширина области просмотра <768px, я хочу, чтобы сетка css имела только один столбец, но по какой-то странной причине этого не происходит. </p>

мой код

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
body {
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
  font-family: Roboto, sans-serif;
  background-color: #21a6ff;
}

header {
  text-align: center;
  margin-bottom: 50px;
  color: white;
}

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
  background-color: #FAFAFA;
  padding: 20px;
  margin-right: 5%;
  margin-left: 5%;
}

label {
  justify-self: end;
}

.input-field {
  justfy-self: start;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
}

input {
  padding: 5px;
}

select {
  padding: 5px;
}

button {
  padding: 15px;
  background-color: #21a6ff;
  color: white;
  border: none;
  font-size: 17px;
  cursor: pointer;
  border-radius: 50px;
}

.submit-btn {
  grid-column: 1 / 3;
  justify-self: center;
}

@media (max-width: 768px) {
  body {
    background: lightgreen;
  }
  form {
    grid-template-columns: 1fr;
  }
}
<header>
  <h1 id="title">Developer Survey</h1>
  <p id="description">Let us know you more</p>
</header>

<form id="survey-form" method="POST" action="https://crossorigin.me/https://freecodecamp.com">
  <label for="name" id="name-label">Name</label>
  <input class="input-field" type="text" id="name" placeholder="Enter your name" required>

  <label for="email" id="email-label">Email</label>
  <input class="input-field" type="email" id="email" placeholder="Enter your email" required>

  <label for="number" id="number-label">Age</label>
  <input class="input-field" type="number" id="number" min="1" max="110" placeholder="Enter your age" required>

  <label for="dropdown" id="dropdown-label">Which option best describes your current role?</label>
  <select class="input-field" name="drop" id="dropdown">
    <option value="" disabled selected>Select your option</option>
    <option value="student">student</option>
    <option value="graduate">graduate</option>
    <option value="full-time-job">full time job</option>
    <option value="perfer-not-to-say">perefer not to say</option>
    <option value="other">other</option>
  </select>

  <label for="radios" id="radios-label">do you love javascript?</label>
  <div class="input-field" id="radios">
    <ul>
      <li><label><input type="radio" name="radio" value="1"> Definitely</label></li>
      <li><label><input type="radio" name="radio" value="2"> maybe</label></li>
      <li><label><input type="radio" name="radio" value="3"> not sure</label></li>
    </ul>
  </div>

  <label for="checks" id="checks-label">programming languages that you use</label>
  <div class="input-field" id="checks">
    <ul>
      <li><label><input type="checkbox" name="checkbox" value="1"> Python</label></li>
      <li><label><input type="checkbox" name="checkbox" value="2"> js</label></li>
      <li><label><input type="checkbox" name="checkbox" value="3"> Java</label></li>
      <li><label><input type="checkbox" name="checkbox" value="4"> C++</label></li>
      <li><label><input type="checkbox" name="checkbox" value="5"> C</label></li>
      <li><label><input type="checkbox" name="checkbox" value="6"> Lisp</label></li>
      <li><label><input type="checkbox" name="checkbox" value="7"> Other</label></li>
    </ul>
  </div>

  <label for="more" id="more-label">Any additonal comments?</label>
  <textarea class="input-field" name="more" id="more" style="height:50px;resize:vertical;"></textarea>

  <div class="submit-btn">
    <button id="submit" type="submit">Submit</button>
  </div>
</form>

1 Ответ

0 голосов
/ 17 ноября 2018

Это связано с тем, что свойство, примененное к кнопке grid-column: 1 / 3;, заставляет вашу сетку всегда иметь минимум 2 столбца.

Вам необходимо изменить это внутри медиа-запроса: 

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
body {
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
  font-family: Roboto, sans-serif;
  background-color: #21a6ff;
}

header {
  text-align: center;
  margin-bottom: 50px;
  color: white;
}

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
  background-color: #FAFAFA;
  padding: 20px;
  margin-right: 5%;
  margin-left: 5%;
}

label {
  justify-self: end;
}

.input-field {
  justfy-self: start;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
}

input {
  padding: 5px;
}

select {
  padding: 5px;
}

button {
  padding: 15px;
  background-color: #21a6ff;
  color: white;
  border: none;
  font-size: 17px;
  cursor: pointer;
  border-radius: 50px;
}

.submit-btn {
  grid-column: 1 / 3;
  justify-self: center;
}

@media (max-width: 768px) {
  body {
    background: lightgreen;
  }
  form {
    grid-template-columns: 1fr;
  }
  .submit-btn {
    grid-column: 1;
  }
}
<header>
  <h1 id="title">Developer Survey</h1>
  <p id="description">Let us know you more</p>
</header>

<form id="survey-form" method="POST" action="https://crossorigin.me/https://freecodecamp.com">
  <label for="name" id="name-label">Name</label>
  <input class="input-field" type="text" id="name" placeholder="Enter your name" required>

  <label for="email" id="email-label">Email</label>
  <input class="input-field" type="email" id="email" placeholder="Enter your email" required>

  <label for="number" id="number-label">Age</label>
  <input class="input-field" type="number" id="number" min="1" max="110" placeholder="Enter your age" required>

  <label for="dropdown" id="dropdown-label">Which option best describes your current role?</label>
  <select class="input-field" name="drop" id="dropdown">
    <option value="" disabled selected>Select your option</option>
    <option value="student">student</option>
    <option value="graduate">graduate</option>
    <option value="full-time-job">full time job</option>
    <option value="perfer-not-to-say">perefer not to say</option>
    <option value="other">other</option>
  </select>

  <label for="radios" id="radios-label">do you love javascript?</label>
  <div class="input-field" id="radios">
    <ul>
      <li><label><input type="radio" name="radio" value="1"> Definitely</label></li>
      <li><label><input type="radio" name="radio" value="2"> maybe</label></li>
      <li><label><input type="radio" name="radio" value="3"> not sure</label></li>
    </ul>
  </div>

  <label for="checks" id="checks-label">programming languages that you use</label>
  <div class="input-field" id="checks">
    <ul>
      <li><label><input type="checkbox" name="checkbox" value="1"> Python</label></li>
      <li><label><input type="checkbox" name="checkbox" value="2"> js</label></li>
      <li><label><input type="checkbox" name="checkbox" value="3"> Java</label></li>
      <li><label><input type="checkbox" name="checkbox" value="4"> C++</label></li>
      <li><label><input type="checkbox" name="checkbox" value="5"> C</label></li>
      <li><label><input type="checkbox" name="checkbox" value="6"> Lisp</label></li>
      <li><label><input type="checkbox" name="checkbox" value="7"> Other</label></li>
    </ul>
  </div>

  <label for="more" id="more-label">Any additonal comments?</label>
  <textarea class="input-field" name="more" id="more" style="height:50px;resize:vertical;"></textarea>

  <div class="submit-btn">
    <button id="submit" type="submit">Submit</button>
  </div>
</form>

Свойства сетки-шаблона-строки, сетки-шаблона-столбца и области-шаблона сетки определяют фиксированное число дорожек, которые образуют явную сетку . Когда элементы сетки располагаются за пределами этих границ , контейнер сетки генерирует неявные дорожки сетки путем добавления неявных линий сетки в сетку. Эти строки вместе с явной сеткой образуют неявную сетку. ref

Упрощенный пример для лучшей иллюстрации: 

.box {
  display:grid;
  grid-template-columns:50px; /*we explicitly define one column*/
  grid-gap:5px;
}
.box > div:first-child {
  grid-column:1/7; /*this will implicitly create more*/
  background:red;
  height:20px;
}
.box > div {
  background:blue;
  height:20px;
}
<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Для более подробной информации:

https://drafts.csswg.org/css-grid/#explicit-grids

https://drafts.csswg.org/css-grid/#implicit-grids

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...