CSS Grid system for form

grid form example
css grid framework
css flexbox form layout
grid form bootstrap
css grid responsive
css grid layout examples
css form
css grid generator

I have a form that and I want the two input tags on top and the textarea on bottom. I have the following currently

.uploadFile {
    margin: 0 auto;
    width: 50%;
}

.uploadForm {
    padding: 10px;
}

.uploadForm>button {
    float: right;
}
<div class="uploadFile">
  <form action="includes/upload.inc.php" method="POST" class="uploadForm">
    <!-- <input type="file" name="file"> -->
     <input type="text" name="software-name" id="software-name">
     <input type="text" name="filename" placeholder="File name on DigitalOcean Space">
     <textarea name="software-description" id="software-desc" cols="30" rows="10"></textarea>
     <button type="submit">Upload</button>
  </form>
</div>

Here is a start. For the documentation have a look at: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

.uploadFile {
    margin: 0 auto;
    width: 50%;
}

.uploadForm {
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-gap: 10px;
}

.uploadForm>button {
    float: right;
    grid-column-start: 2;
}

textarea, input {
  width: 100%;
}

textarea {
  grid-column-start: span 2
}
<div class="uploadFile">
  <form action="includes/upload.inc.php" method="POST" class="uploadForm">
    <!-- <input type="file" name="file"> -->
     <input type="text" name="software-name" id="software-name">
     <input type="text" name="filename" placeholder="File name on DigitalOcean Space">
     <textarea name="software-description" id="software-desc"></textarea>
     <button type="submit">Upload</button>
  </form>
</div>

CSS Grid Layout and Progressive Enhancement, in mind, it'll take less code than writing media queries all over the place. With CSS Grid Layout. Let’s not dwell on the traditional approach too much. With Grid, we will divide the form into two columns as follows: The first column will take twice the horizontal space of the second column, which we’ll achieve using fr units: form { display: grid; grid-template-columns: 2fr 1fr; grid-gap: 20px; }

I would use css grid if that is an option as @SuperDJ demonstrated. This is an alternative solution using floats.

* {
 box-sizing:border-box;
 }
.uploadFile {
    margin: 0 auto;
    width: 50%;
}

.uploadForm {
    padding: 10px;
}

.uploadForm>button {
    float: right;
    margin:10px 0 0 0;
}
#software-name,
#software-file {
  width:calc(50% - 5px);
  float:left;
  margin:0 0 10px 0;
}
#software-name {
  margin-right:5px;
}
#software-file {
  margin-left:5px;
}
#software-desc {
  width:100%;
}
<div class="uploadFile">
  <form action="includes/upload.inc.php" method="POST" class="uploadForm">
    <!-- <input type="file" name="file"> -->
     <input type="text" name="software-name" id="software-name">
     <input type="text" name="filename"  id="software-file" placeholder="File name on DigitalOcean Space">
     <textarea name="software-description" id="software-desc" cols="30" rows="10"></textarea>
     <button type="submit">Upload</button>
  </form>
</div>

Flexbox vs. CSS Grid: Which Should You Use and When?, The Grid module adds 18 new CSS properties in order to create a layout with rows and columns. Elements within the grid can be placed in any row/column, span multiple rows and/or columns, overlap other elements, and be aligned horizontally and/or vertically. Grid is ideal for page and form layout. It’s possibly better to compare CSS Grid with table-based layouts, but they’re considerably more flexible and require less markup. It has a steeper learning

Not using Bootstrap is a pain tbh, but here's how you can do it without it.

.uploadFile {
    margin: 0 auto;
    width: 50%;
}

.uploadForm {
    padding: 10px;
}

.uploadForm>button {
    float: right;
}
.desc {
    width: 100%;
}
.form-group {
    display: inline-block;
    width: 100%;
    padding: 0 !important;
}
<div class="uploadFile">
  <form action="includes/upload.inc.php" method="POST" class="uploadForm">
    <!-- <input type="file" name="file"> -->
     <div class="form-group">
       <input class="name" type="text" name="software-name" id="software-name">
       <input class="file" type="text" name="filename" placeholder="File name on DigitalOcean Space">
     </div>
     <textarea class="desc" name="software-description" id="software-desc" cols="30" rows="10"></textarea>
     <button class="submit" type="submit">Upload</button>
  </form>
</div>

Look Ma, No Media Queries! Responsive Layouts Using CSS Grid , CSS Grid is a two-dimensional layout system designed to tackle challenges around displaying many data points on variable size displays. PS: I'm sorry for being such a pain in the ass but form UIs is probably the most complex and important aspect of a web application one should care about, the whole set of form elements is also one of the most complex to stylize and I would like to put a end to this headache by creating a simple CSS "framework" to stylize forms in a simple manner.

To expand upon SuperDJ's answer, you can also use Flexbox to achieve this formatting. To decide which one to use in your particular situation, you should read up on the differences between the two as they are similar, but still different.


Edit: This is just an example and may not work perfectly as is in all browsers. Make sure you implement any fallbacks and vendor prefixes that need to be implemented.

/* New styles */

.row {
  display: flex;
}

.row-reverse {
  justify-content: flex-end;
}

.cell {
  flex-grow: 1;
  width: 100%;
}

/* Pre-existing styles */

.uploadFile {
  margin: 0 auto;
  width: 50%;
}

.uploadForm {
  padding: 10px;
}
<div class="uploadFile">
  <form action="includes/upload.inc.php" method="POST" class="uploadForm">
    <!-- <input type="file" name="file"> -->
    <div class="row">
      <input type="text" name="software-name" id="software-name" class="cell">
      <input type="text" name="filename" placeholder="File name on DigitalOcean Space" class="cell">
    </div>
    <div class="row">
      <textarea name="software-description" id="software-desc" cols="30" rows="10" class="cell"></textarea>
    </div>
    <div class="row row-reverse">
      <button type="submit">Upload</button>
    </div>
  </form>
</div>

The Benefits of Using CSS Grid for Web Form Layout, The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and  Is there any CSS grid system that I can use to have multi-column forms while still making all the form elements have the same size (inputs, selects and textareas); eg. 1 input in 1 column should have 400px while 2 columns should have 200px each.

Using CSS Grid and Box Alignment properties to build form layouts, CSS Grid can help you create a simple form that contains an email and a submit button easily. With this, you have completed form's layout. A CSS Grid consists of horizontal and vertical grid tracks (rows and columns). The grid tracks define the grid items (grid cells) that are easily identifiable by the row and column they belong to. The grid container is the HTML element that contains the whole CSS Grid.

CSS Grid Layout, CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a  Chapter1 An Introduction to the CSS Grid Layout Module by Ahmad Ajmi As web applications become more and more complex, we need a more natural way to do advanced layouts easily without hacky solutions that use floats and

Creating a simple form with CSS Grid, You can see the layout taking shape in the value of grid-template-areas . The header spans over two column tracks, as does the nav . In the third  To define a grid use new values of the display property `grid` or `inline-grid`. You can then create column and row tracks.

Comments
  • why dont you try with bootstrap?
  • I think of Boostrap as a prototyping framework and not good for real world stuff
  • Nope, it is used in real world stuff everywhere and all the time.
  • its not a prototyping framework. Its the most popular front-end mobile-first framework
  • I never said it waas a prototyping framework, I said I think of it as one. If it helps for you to understand, I don't want to use Bootstrap. I could care less if it's used all the time. I don't want to use it.
  • Now we just need a display: table answer and we'll have the 4 horsemen of the CSS apocalypse.
  • Whoops, I see what you're talking about! Sorry about that, I'll adjust it.
  • Updated. It helps when the inputs listen to me.
  • input is still going past the text area
  • Hm, I'm not getting that. It may be a browser issue. Here's my view from Chrome.
  • Must be, I'm in FF.