Как мне расположить форму 3-cols с обеих сторон без использования Bootstrap

Question

Как мне расположить форму (внутри карточки), по 3 колонки с обеих сторон, чтобы форма лежала примерно на 6 колонках посередине без использования Bootstrap, Materialise или чего-либо подобного. Спасибо

  <div class="card">
  
      <div class="form_top">
        <h1>Form</h1>
      </div>
      
      <div class="field1">
        <label>Username</label>
        <span class="holder">{{ form.username }}</span>
      </div>

      <div class="field1">
        <label>E-mail</label>
        <span class="holder">{{ form.email }}</span>
      </div>

      <div class="field1">
        <label>Password</label>
        <span class="holder">{{ form.password1 }}</span>
      </div>

      <div class="field1">
        <label>Confirm Password</label>
        <span class="holder">{{ form.password2 }}</span>
      </div>
      
  </div>

Как это выглядит: [1]: https://i.stack.imgur.com/BLcsQ.png

Как это должно выглядеть: [2]: https://i.stack.imgur.com/rYlJW.png

Answer 1

Одним из способов является использование CSS Сетка .

Создайте контейнер и разбейте его на 12 столбцов:

.card-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

Скажите содержимое для диапазона 6 столбцы, начиная с 4-го столбца.

.card {
  grid-column: 4 / span 6;
}

Codepen здесь .

Answer 2

Вы можете использовать css для класса "карта". Вы хотите поместить карту посередине, поэтому оставьте поле слева и справа. «Margin-left» поместит карту, а «margin-right» ограничит перемещение карты правой стороной. margin-left: необходимая ширина margin-right: необходимая ширина

Это работает для меня. Надеюсь, это решит ваш запрос.

Answer 3

Я немного запутался в вопросе, вы говорили о 3cols, а затем 6cols. Вы имеете в виду, что на странице у вас будет 3 карты, занимающие 3 столбика?