The Grid System

In preparation for the Andelas’ bootcamp, I knew we’ll be asked to build a HTML UI template in vanilla HTML and CSS. CSS can be a nightmare, especially without frameworks. So in other to pass this hurdle I had to learn CSS grid, so I could easily position elements on the screen. You can checkout the resource I used below.

Learning CSS grid thought me how to place elements on the web page properly. I even got a better understanding on how divs and elements are properly targeted.

I got interested to learn CSS grid, when I found out that it has a unique way of making your web page responsive, even without using a @media(){} . Although to get the most out of its responsiveness, It’s important to actually add @media(){} or else you’ll have all your div all over the place.

The most interesting thing about CSS grid, is how easy it is, for you to mock up a web template with a few lines of code

Doing this with traditional CSS would have been a real pain, But this is actually just a few lines of code in CSS grid. So lets go over how this happend

First I have a very basic html file, nothing fancy

So here we have what we’ll need for our web page, and you can do this with other HTML5 semantics, as long as you properly target them. My CSS file would be

So let’s work through this piece of code, first of all we’ll target the .container , which holds every other elements in it. So we give that container a display rule of grid, this tells the text editor that we are not here to play and its time to be grilled. After that, we just declare a grid template, but first we tell the grid system how many rows we want repeat(12,1fr) tells grid to divide our screen into 12 columns of 1 fraction unit, as opposed to using px , 1fr always makes the column responsive, no matter what size the screen is, it will always be a fraction unit, out of the box! No extra coding for that effect. after that, we declare a row template, of 3 rows; first row is a 100px, the next is auto ;this will take up whatever space is left between the first and third row, and the third one is 50px. The next thing would be to use a grid template-areas rule, to place every element on the screen. NB: The elements you place in the templates must be a square or rectangular shape. After that you just target the elements inside the container, with the appropriate names, and Boom! You’ll have a nicely position page. The possibilities with this tech is endless. And I’m looking forward to doing more with it.

Related posts:

NullPointerExceptions are exceptions that occur when you try to use a reference that points to no location in memory (null) as though it were referencing an object. Calling a method on a null…

Every woman is familiar with those tricky trouble zones that take a little extra work to tighten and tone (lower abs, anyone?). After a lot of exercise trial and error, I’ve finally found a solid set…

One Clear Step is a new Medium publication—designed to help a global community of humans to practice healing, growing, and celebrating their mental health.