AWIA LogoFacebookGoogle Plusicon-codingicon-computericon-designicon-drawicon-drupalicon-maintenanceicon-mapicon-wordpressLinked InTwitter

CSS grid has been in mainstream browsers since the middle half of 2017. Currently it is supported in about 77% of the browsers. It is supported by Microsoft Edge, Firefox, Chrome and Safari. It's not supported in Opera Mini but works perfectly fine in Opera. UC browser for Android is another problem. The problem browsers are older mobile browsers, so a simple fallback should take care of them.

The promise of CSS was to separate the content from the layout. CSS layouts killed the old table based layouts that were a semantic nightmare. Now, CSS floats and flexbox make the job a lot better. But they are still a way off the holy grail of semantic markup and CSS.

Bootstrap does a great job but it can be improved. I've used and example of a simple contact form. One done using Bootstrap 4 and the other using plain HTML and CSS grid for the layout.

Bootstrap 4 HTML

Bootstrap Form

Note that each row is wrapped in a div element. Each input is also wrapped in a div. This allows us to

<form class="form">
  <div class="form-group row">
    <label for="email" class="col-sm-2 col-form-label">Email address</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" placeholder="Enter email">
    </div>
  </div>

  <div class="form-group row">
    <label for="name" class="col-sm-2 col-form-label">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" placeholder="Enter name">
    </div>
  </div>

  <div class="form-group row">
    <label for="message" class="col-sm-2 col-form-label">Message</label>
    <div class="col-sm-10">
    <textarea class="form-control" id="message" rows="3"></textarea>
    </div>
    </div>
  <div class="form-row row">
    <div class="col-sm-2"> </div>
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div
</form>

Semantic HTML

Unstyled Form

I've taken away the "form-group" divs. Their only purpose was to hold the form parts in rows. Now all we have is the markup and nothing but the markup.

<form class="form">
  <label for="email">Email address</label>
  <input type="email" class="form-control" placeholder="Enter email">
  <label for="name">Password</label>
  <input type="text" class="form-control" placeholder="Password">
  <label for="message">Message</label>
  <textarea class="form-control" rows="3"></textarea>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>


Building the layout

Centre the container

This just a standard box that expands to 1200px wide. You can replace the whole page layout with CSS grid, but I'm only concentrating on the form

.container{
  margin: 0 auto; 
  max-width: 1200px;
}

Add the grid

.form{
  display: grid;
  grid-template-columns: 1fr 5fr;
}

Bootstrap is based on a 12 column grid. The form uses 2/12 and 10/12 columns. We can use grid's fr (fraction unit) to do the same thing. I've just used 1 and 5 instead of 2 and 10.

You'll notice grid has targetted each odd numbered element and made it 1fr wide. Every even element is 5fr wide. This lays things out quite nicely, except for the submit button.

That can be fixed by assigning the button to the second column

.button{
	grid-column: 2;
}

This does leave the button taking up the whole of the column. This can be fixed with a justify-self property


.button{
  grid-column: 2;
  justify-self: start;
}

The parts are a bit squashed. Let's fix that with a simple grid-gap. There is no messing with negative margins

.form{
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 5fr;
}

The End Result

CSS GridForm

.container{
  margin: 0 auto; 
  max-width: 1200px;
}
.form{
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 5fr;
}
.button{
  grid-column: 2;
  justify-self: start;
}

The end result still needs some work. The fonts and input areas aren't as nice as the bootstrap version but that can be fixed with a few more tweaks to the code. Laying out a sematic form with no div wraps.

The bootstrap version contains 8899 lines of CSS. The grid version is 15 lines. To be fair, bootstrap does a lot more than lay out a form. It is responsive and has been thoroughly tested. It is the result of 1,000's of hours of work.

The grid version only needs 9 lines of html to display the form. The bootstrap version took more than twice the amount of HTML to achieve the same aim.

The code is available at https://github.com/llebkered/gridform

Links

Categories

Posts

All posts