Combining CSS Grid with Bootstrap Grid

Before I discovered CSS grid, I used bootstrap grid a lot. Bootstrap grid was a reasonable solution to the many responsiveness issues I had back then as a newbie. Then I discovered CSS grid. CSS grid’s edge over bootstrap grid is its two-dimensional quality (ability to use rows and columns) as opposed to bootstrap’s one dimension row.

On the internet, there are a lot of debates over which is better, when should each be used and how to use them. This confused me a lot. Although I use CSS grid more, I love them both. While CSS grid is considerably more powerful, I find bootstrap grid to be more flexible. Do I really have to choose?

Bootstrap has an in-built grid options system that works across multiple devices and this has helped me eliminate the use of media queries. With the use of bootstrap grid options, I can adequately position <divs> how I want them to appear on different screens without using media queries.

Here’s what I mean

Link to the pen https://codepen.io/Barrisam/pen/KYJgMm

In the code above, I have created a nested grid in <section> with class .section of four columns. I actually want the four columns to each take-up half the screen width in devices less than 998px and…