CSS Grid vs Bootstrap: Which one suits you
User Interface is what every website user actually interacts with when accessing the site. The functionality, aesthetic appeal, and intuitive nature of the UI determine the quality of the user experience. Thus, a high-performing, responsive and visually pleasing UI is imperative to a website’s success.
There are multiple tools that help with defining website layout and with the placement of UI elements. It is essential to choose the right tool as that determines the quality of the UI, as well as the ease with which it can be built.
This article compares two commonly used tools aka layout grids — CSS Grid and Bootstrap. But before the comparison, let’s discuss these tools and their functioning, individually.
What is CSS Grid?
CSS Grid is a two-dimensional grid system used to work on the layout of UI elements and segments of a webpage. The Grid comprises horizontal and vertical lines to form rows and columns, much like a table.
Using CSS Grid to place UI elements helps to position them precisely which is beneficial for implementing responsive design for the site. The Grid uses pixels to fix the track sizes, and these too can be flexible on a percentage basis. This helps the same webpage adjust its design according to the screen size of various devices like phones, tablets, desktops, etc.
Check your website on this free responsive design checker.
CSS Grid thus plays an important role in creating web page layouts that facilitate responsiveness. It is a key tool in building cross-platform compatible software by facilitating the creation of an attractive UI that delights users.
How does CSS Grid work?
CSS Grid divides the website page space using rows and columns, which can be allocated in a fixed manner by specifying the pixels or the fraction (using fr) of the available space which is to be allocated to a designated section. fr is used to make the layout responsive and cross platform compatible.
Let’s look at an example with a layout defining 7 areas, that are divided using fractions — columns: 2 fractions, 3 fractions, 1 fraction, and in rows: 1 fraction, 2 fractions, 3 fractions.
Here’s how the layout will look:
HTML (calling the wrapper class defined using CSS Grid)
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> <div>Six</div> <div>Seven</div> </div>CSS (defining layout using flexible CSS grid)
.wrapper { display: grid; grid-template-columns: 2fr 3fr 1fr; grid-template-rows: 1fr 2fr 3fr } * {box-sizing: border-box;}The following code will add text to the Area defined by box Five “ Welcome to BrowserStack! “
Since the layout is the same, the CSS class will remain unchanged and only HTML code will be altered.
HTML (calling the wrapper class defined using CSS Grid)
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five </p> Welcome to BrowserStack! </div> <div>Six</div> <div>Seven</div> </div>
What is Bootstrap?
Bootstrap is a suite carrying a collection of HTML, CSS, and JavaScript toolkits used for building websites. It is flexible and offers cross browser compatibility through its reusable UI components. This article will focus on the Bootstrap Grid System that can help readers understand a layout comparison.
Bootstrap has a responsive grid system, with custom breakpoints. It offers a mobile-first design that makes a single code scale for multiple devices like phones, tablets, and desktops. Much like the CSS Grid, this too is defined using a two-dimensional grid made up of horizontal and vertical lines forming rows and columns.
How does Bootstrap Grid work?
Unlike CSS Grid, in Bootstrap Grid, column elements are placed within row elements, creating a horizontal group of columns with each row. The columns remain the immediate children of the respective rows where they are being placed. In a full row, the maximum number of columns shall be 12.
It offers four tiers of classes namely xs, sm, md, and lg, that are classified as follows according to device size:
Check Website Responsiveness for Free
This classification according to device size works helps implement website responsiveness for devices of different sizes to deliver a pixel-perfect UI.
Let’s look at an example with a layout defining 7 areas — 3 columns in the first row and 4 in the second row. The area defined by the fifth box contains the text “Welcome to BrowserStack!”
Here’s how the layout will look:
Page Layout for md class tier i.e. desktop >=992 px
<div class="row"> <div class="col-md-4">One</div> <div class="col-md-4">Two</div> <div class="col-md-4">Three</div> </div> <div class="row"> <div class="col-md-3">Four</div> <div class="col-md-3">Five Welcome to BrowserStack!</div> <div class="col-md-3">Six</div> <div class="col-md-3">Seven</div> </div>This layout may have areas overlapping for the tablets and phones. Thus, one can combine different class tiers to get different visuals on mobile and desktop views.
<div class="row"> <div class="col-xs-12 col-md-4">One</div> <div class="col-xs-12 col-md-4">Two</div> <div class="col-xs-12 col-md-4">Three</div> </div> <div class="row"> <div class="col-xs-12 col-md-3">Four</div> <div class="col-xs-12 col-md-3">Five Welcome to BrowserStack!</div> <div class="col-xs-12 col-md-3">Six</div> <div class="col-xs-12 col-md-3">Seven</div> </div>Page Layout for xs class tier i.e. mobile phones<786 px
The above code would result in creating the same layout for desktop devices (md tier), but will look differently on phones.
CSS Grid vs Bootstrap
- Bootstrap offers more than a grid layout system and is more of a frontend toolkit suite capable of pulling off complex responsive designs through its predefined classes.
- On the other hand, CSS Grid is a simple and flexible grid layout system which applies a cross compatible design that provides a top-notch user experience. Thus, using CSS Grid over Bootstrap makes sense when implementing simple layouts.
Here is the classified comparison of CSS Grid and Bootstrap:
Markup
Has a cleaner and more legible markup. The grid layout is not defined in the markup but done in CSS
Requires a div tag for each row and for defining the class tier for specifying the layout in each div tag. This makes code lengthier
Column Limitation
Offers a flexible layout with no column limitation. This makes it very easy to have any number of columns
Since the grid is split into 12 columns, any layout that doesn’t add up to 12 is difficult to materialize
Responsiveness
Even if HTML remains the same, just add different media queries to the CSS and define the grid layout for each HTML element
One can define content area layout individually for different device sizes using predefined class tiers. But this makes the markup bulkier, as they increase the number of div classes.
Page Load Speed
Well supported by most browsers and versions. No downloads are required and the page load speed is faster
The stylesheet supporting files have to be downloaded which slows down the page load speed
Which one is better?
To build a web application that ensures customer delight, it is essential to offer the right visual appeal across different platforms and devices.
Pro Tip: Once the design has been implemented, testing cross browser compatibility becomes mandatory. It is important to ensure that the UX is uniformly rendered over multiple devices, offering a consistent user experience. For accurate results, cross browser tests must be run on a real device cloud.
Originally published at https://www.browserstack.com.
