In my career as a backend web developer, I was often amazed by the state of the technologies needed to get something working at the front end. From backward browser compatibility to getting the layout you want the solution always seemed to consist of hacky workarounds. For example, for my tutoring product, in order to get the grid to get a non-sticky footer always on the bottom, I had to use a wrapper element with a min-height of 100% with a margin of the height of the footer, and an in-between push div which pushed the footer down.
A developer used to need 5 years of experience to understand how to create any grid in plain HTML without using a framework. Therefore, in my earlier projects I settled with Bootstrap. The framework uses classes like .col.sm-3 to render the layout on a page. Getting these classes to render is a pain especially when using a web framework like Drupal, you had to change the whole rendered HTML structure in code.
When I started a new project, I was thrilled when I found out we have a better alternative in the form of CSS Grid. It is part of the W3C specifications since 2017 and it is supported by nearly all browsers. One of the main benefits is that you do not need to change your HTML output to change your layout, you can specify how the layout is rendered with CSS. When using CSS Grid, you no longer need to use Bootstrap reducing the complexity of your project. When you are new to frontend development, it is much better first to learn the core (first principle) technology than to learn the specific concepts of a framework that built upon the core technology.
To learn CSS Grid I recommend watching the videos from the Layout Land YouTube channel of Jen Simmons. For example, the basics of CSS Grid or the biggest mistakes of CSS Grid. A good example of how CSS Grid works is in a Holy Grail layout (blog and code, and note the footer on the bottom of the page!).
Image by Manuel Schmalstieg CC BY-SA 4.0 from Wikimedia Commons.
0 Comments