Re-learn how to split your website using Flexbox and Grid template

Tram Ho

For those of you who are learning HTML CSS, when it comes to Layout, you will inevitably show the name Bootstrap, I used to use Bootstrap so much that I was too dependent on it to forget how to write CSS, to the point that every smallest component I have to put Bootstrap in to be able to align the Elements inside.

Honestly, if a developer does not write CSS, what else should he do? Then I started typing more CSS and learned a lot more, the simplest example is using Flexbox and Grid to divide and align layouts instead of just using the pre-made components.

Example 1: Put Footer at the bottom of the page

Previously when doing this section I would have the problem that the footer is not exactly at the bottom of the page but it will depend on the total height of the web page, if the site has the height exceeding the original height of the page. The screen does not say anything, but if the height of the page is too short this footer is very easy to float in the middle.

To solve this problem I have 2 ways: Flexbox and Grid

Handling with Flexbox

Let’s have a look at the HTML file first

This structure consists of 3 parts: Header, Main, Footer , I added a little CSS to be able to see these 3 parts better. Now my job is to keep Footer at the bottom of the page regardless of the height of the page.

First we need to make sure the minimum height of the web page will always cover the screen, you can do this by setting the min-height: 100vh for the body , setting the display: flex and flex-direction: column for this tag to ensure that the next element will be aligned to the column format.

Now the Footer section is very simple, you just need to set the margin-top: auto , the Footer will automatically be spaced to the bottom of the page regardless of the added elements later, simply not. take care of the height as the margin will automatically be adjusted

I have drawn more dashed lines around the main card so that it can be seen more clearly, as you can see the extra white part right below the main card has an extra white part, that’s because Footer now is pushed to the bottom of the page regardless of the height of other elements.

Deal with Grid

With Grid we have a slightly different treatment, first let’s take a look at CSS:

With Grid we have removed the margin setting for Footer and still get the same effect. Now let’s break down a little:

  • We have a property that looks pretty weird: grid-template-rows: auto 1fr auto , this property will allow the entire inner element to split into separate rows, as we see auto 1fr auto , 3 units This will in turn correspond to 3 rows that are: Header, Main, Footer.
  • With Header and Footer I set to auto , I don’t care about the height of these two elements, so they automatically adjust.
  • For Main I set it to 1fr . fr is a Grid unit, short for fraction . This unit will ask the browser to calculate the free space to divide the rows, in which case my Main will automatically fill the spaces between the Header and the Footer, which makes the Footer self-contained. push towards the bottom of the page, and we get the same result as above. This is quite a confusing concept, so if you have the opportunity you just try playing around a few lines of CSS to see specifically how that space is changed.

Which one is better?

In summary, as you can see above, it seems that using Grid will be a bit more advantageous, because less code is used and still equally effective, but the problem will happen if you want to. If you add elements between Header and Footer, you also need to add new positions to the respective grid-template-rows , or you need to somehow make sure the template has only 3 elements so you don’t have to change the grid- template.

On the other hand, flexbox is suitable for every template with many elements even though the amount of code is a bit more or if you want to change article instead of main for example. In a nutshell, depending on your project mindset and requirements or usage habits, you have a lot of ways to customize what’s already available into your own perfect website.

Share the news now

Source : Viblo