After taking my latest design from Figma and starting to work on the front end, I encountered a very interesting situation when translating it into HTML. In a Section where I divided the content into three parts on the horizontal axis, the small line I placed vertically in the middle did not adhere to Bootstrap's grid structure, along with the cards I designed in the left and right blocks.

To center the content proportionally, I needed to assign .col-5, .col-5 to the left and right sections, and the remaining .col-2 to the middle section. In other words, as in the example:

As you can imagine, the middle section appeared excessively wide for just one line and caused a distortion in the overall design look:

Therefore, I embarked on a quest for a solution through CSS.

A Small Solution

I gave width: 108%; to the right and left cards and added margin-left: -8%; to the right side. Resetting this on mobile resolved the situation without making any changes to the columns. However, I had to make some adjustments in the design layout.

Conclusion

So am I the only one who sees that this grid system tends to produce classic web pages? No. There are many people who say that this system makes the design dependent on a fixed grid system. However, somehow this situation continues in Bootstrap 5 as well. Actually, this is not the only thing that bothers me. There is also the width of the Bootstrap Container. I don't know why, but why should a screen be fixed within 1140px?

I don't know if there are others who think differently, but when I pull a website within a Bootstrap Container onto at least a 22" LCD, it looks like a short description. At least Bulma CSS, coded with the Flex Layout system in recent times, has extended its hand a bit more in this regard and set the Container width to 1152px.

When I tried it, of course, it provides a more spacious appearance compared to Bootstrap. You may think how effective can 12px be, but yes, it really has a significant impact on the appearance, try it for sure. Also, for 1488px and above, it has set a Container width of 1344px.

For Bulma: https://bulma.io/

At the end of my writing, I started to search for an individual solution for the grid and created a new structure with a 24-column logic for myself. Moreover, I applied this by overriding the default Bootstrap classes.

At the current stage, I am using it on my own blog page first, but based on my small experiments, I think I can expand it a bit more, maybe up to 32 or 54. Also, by slightly expanding the width of the Content area of my blog page, I have already been able to customize my appearance with my own grid.

24-Column Grid CSS Code

I created a grid.css that allows me to allocate space up to 24. When I applied it in the design, I achieved the desired result. In the end, if I had used a 12-column format, I would have needed extra CSS coding, and I would have had to repeat the same thing in every situation. It was quite useful for me.