How to display multi-column input groups in html/css?

Veuria
June 1, 2023
255 views
1 vote
2 Answers

So I’m trying to make a multi-column form with some inputs using html and css. I would like for the form to have 3 columns per section with multiple inputs.

Current Code Image

Here’s my current code and how it looks. I just want to insert more inputs to the right of the current inputs and add more rows + columns below those. Kind of like a really complicated checkout form.

body {
  font-family: Arial;
}

input[type=text],
select {
  padding: 12px 20px;
  margin: 4px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

div.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
  overflow: visible;
  float: left;
  margin: 1 1%;
}

div.container2 {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
  overflow: hidden;
  float: left;
  width: 50%;
  margin: 1 1%;
}

div.container3 {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
  float: left;
  width: 50%;
  margin: 1 1%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

<div class="row">
  <div class="container">
    <form action="/action_page.php">
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">

      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">


    </form>
  </div>

  <div class="container2">
    <form action="/action_page.php">
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">

      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    </form>
  </div>

  <div class="container3">
    <form action="/action_page.php">
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">

      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    </form>
  </div>
</div>

Tags: css html

Answers

Your problem can be easily solved with grid:

.row {
  display: grid;
  /* Make three columns of equal width */
  grid-template-columns: repeat(3, 1fr);
  /* The gap between columns */
  gap: 5px;
}

…and that’s it. You don’t need ::after { clear: both; } nor any of the float, width or margin. Unless you have to support legacy browsers, this is the way to go.

Try it:

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

/* Original styles */

body {
  font-family: Arial;
}

input[type="text"],
select {
  padding: 12px 20px;
  margin: 4px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
}

<div class="row">
  <div class="container">
    <form action="/action_page.php">
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">

      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">


    </form>
  </div>

  <div class="container">
    <form action="/action_page.php">
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">

      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    </form>
  </div>

  <div class="container">
    <form action="/action_page.php">
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">

      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    </form>
  </div>
</div>

If I understood correctly, you can remove the various containers styles and use either display: grid or display: inline-grid on the .row element.
Updated example:

body {
  font-family: Arial;
}

.row {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 10px;
  background-color: #f2f2f2;
  padding: 10px;
  border-radius: 5px;
}

input[type=text],
select {
  padding: 12px 20px;
  margin: 4px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

<div class="row">
  <div class="container">
    <form action="/action_page.php">
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">

      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">


    </form>
  </div>

  <div class="container">
    <form action="/action_page.php">
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">

      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    </form>
  </div>

  <div class="container">
    <form action="/action_page.php">
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">

      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    </form>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.