How do use a CSS grid to layout a form nicely?

Say with inputs like a file input and a browse button?

Similar to creating a table but now we include inputs as one of the element types.

<html>
<head>
<link rel="stylesheet" href="FORM.css">
</head>
<body class="FORMpage">
   <div class="FORMfileBrowse">
      <div class="FORMlabel">Location:</div><input></input><div class="FORMbrowse">Browse</div>
      <div class="FORMlabel">Location:</div><input></input><div class="FORMbrowse">Browse</div>
   </div>
</body>
</html>

and

.FORMpage{
   display : grid;
   grid-auto-rows: 2em;
   grid-template-columns: 200px 1fr 200px;
}
.FORMfileBrowse{
   grid-row-start: 2;
   grid-column-start: 2;
   grid-column-end: 3;
   display : grid;
   grid-auto-rows: 2em;
   grid-template-columns: 100px 1fr 100px;
}
.FORMlabel{
   text-align: right;
}
.FORMbrowse{
   text-align: center;
}

 /* put red debug lines in */
 * {outline: 1px red solid; }

We get this:

Concepts

How do use a CSS grid to layout a form nicely?

Analytics

Related content