How I stopped using Bootstrap’s layout thanks to CSS Grid

How I stopped using Bootstrap’s layout thanks to CSS Grid

Why I stopped using Bootstrap?

  • Bootstrap is too verbose: you need plenty of div even if you only have a couple of blocks in your layout
  • Things get even worse when you add responsiveness…
  • … or when you want to move your blocks around
  • Bootstrap’s grids are limited to 12 columns
  • By default, Bootstrap has 10-pixel paddings that are complex to override
  • Bootstrap has to be downloaded by the users, which slows down your website

How to create a layout for your website without Bootstrap

Let’s say you have the following layout that you want to integrate:

layout

What it would be like with Bootstrap

<body>
  <div class="container">
    <div class="row">
      <div class="col-12 header">...</div>
    </div>
    <div class="row">
      <div class="col-4 navigation-menu">...</div>
      <div class="col-8 main-content">...</div>
    </div>
    <div class="row">
      <div class="col-12 footer">...</div>
    </div>
  </div>
</body>

Even though there are only four blocks, you needed nine different div to code your layout.

How much simpler it would be with CSS Grid

Thanks to CSS Grid, you can get the same result with only five div!

<body>
  <div class="container">
    <div class="header">...</div>
    <div class="navigation-menu">...</div>
    <div class="main-content">...</div>
    <div class="footer">...</div>
  </div>
</body>

Though it will not be as simple as just importing Bootstrap, you will have to add some extra CSS.

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.header {
  grid-column: span 12;
}
.navigation-menu {
  grid-column: span 4;
}
.main-content {
  grid-column: span 8;
}
.footer {
  grid-column: span 12;
}

In the example above, you first defined the container as a 12-column grid.
And then, you set the number of tracks the item will pass through.

What about responsiveness?

Moreover you may want to have a responsive layout for smartphones and tablets.

layout-responsive

With Bootstrap

As the design gets more complex, your HTML also gets more complex with more and more classes:

<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 header">...</div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-6 col-lg-4 navigation-menu">...</div>
      <div class="col-xs-12 col-md-6 col-lg-8 main-content">...</div>
    </div>
    <div class="row">
      <div class="col-xs-12 footer">...</div>
    </div>
  </div>
</body>

With CSS Grid

With CSS Grid, if you want to add responsiveness to your layout, there is no need to change the HTML.
You only need to add some media queries to our CSS stylesheet:

...
@media screen and (max-width: 768px) {
  .navigation-menu {
    grid-column: span 6;
  }
  .main-content {
    grid-column: span 6;
  }
}
@media screen and (max-width: 480px) {
  .navigation-menu {
    grid-column: span 12;
  }
  .main-content {
    grid-column: span 12;
  }
}

What if you wanted to move your blocks around?

Let’s say that instead of the above layout on mobile, you wanted the navigation menu to be above the header:

layout-responsive-blocks

With Bootstrap

You would have had to duplicate your menu, hide one and display the other on mobile and vice versa on desktop:

<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 hidden-sm-up navigation-menu-mobile">...</div>
      <div class="col-xs-12 header">...</div>
    </div>
    <div class="row">
      <div class="col-md-6 col-lg-4 hidden-xs-down navigation-menu">...</div>
      <div class="col-xs-12 col-md-6 col-lg-8 main-content">...</div>
    </div>
    <div class="row">
      <div class="col-xs-12 footer">...</div>
    </div>
  </div>
</body>

And the HTML gets more and more complex as your layout grows.

With CSS Grid

You only need one single line of CSS to move the navigation menu to the top on mobile and here is how to do so:

...
@media screen and (max-width: 480px) {
  .navigation-menu {
    grid-row: 1;
    grid-column: span 12;
  }
  ...
}

Customize your grid layout!

Have as many or as few columns as you want

By default, Bootstrap comes with a 12-column grid system.
This value can be overridden but if you do so, it will be overridden everywhere in your app.

On the other hand, with CSS Grid, you can specify the number of columns per row for each of your grids.
In grid-template-columns: repeat(12, 1fr);, you can just set the number of columns you want instead of 12.

Unwanted 10-pixel paddings

Bootstrap’s columns have 10-pixel paddings on their right and left.
The most advised solution to override them is to use padding-right: 0 !important; and padding-left: 0 !important;.

As with CSS Grid you have control over all your CSS classes, you can set the paddings you want everywhere.

No more need to download any library

Even if Bootstrap’s stylesheet only weights a few kB, it still slows down the loading of your page.

All major browsers shipped their implementation of CSS Grid in 2017, so there is no need to download any extra CSS to use CSS Grid!
At the time of this article (April 2018), 89% of browsers are compatible with CSS Grid.

browser

That’s all for now!

Here are some of the main reasons why I no longer use Bootstrap.
Part 2 on how I also managed to replace Flexbox with CSS Grid is coming!


You liked this article? You'd probably be a good match for our ever-growing tech team at Theodo.

Join Us

  • Florent Destremau

    Technically you need vendor prefixes on Edge & IE, from my own experience, no a very big deal but still important to know !

  • tit

    Could be interesting to show a Holy Grail implementation with css grid

  • Michał Jankowski

    nice to know;)

  • kino90
  • tit

    thank you!

  • МимоПроходящий

    Great article! Thanks!