Grid as I know it

Arg85 — Tue, 17 Aug 2021 17:25:51 +0000

Grid unlike flex-box is something difficult to wrap around your mind with.It can cause a lot of problems if you don't understand it as i have experienced.
Grid is very helpful when it comes to making a layout for websites and it becomes even more powerful when you combine it with flex-box.They are like the jay and veeru of css world one is incomplete without the other.You can make do with just one of them but why make do when you can use both.
grid has numerous properties to use but I am just going to give you a brief of the basics because it might get overwhelming and the more you practice more you gonna understand how things work with grid.
Just like flex-box we need to give a property of display:grid to a container with some elements inside it.

as you can see from above picture as soon as we apply the display grid the elements try to take the whole length of the container div and they are still in a column unlike flex-box.
In flex-box for us to center elements vertically and horizontally you gotta write justify-content center and align-items center but in grid it is just one line of code you write place -items center and voila.

But the real power of grid comes from its grid-template-areas and grid-template-columns that allows you to make any layout for website a hell lot easier than ever.
With grid template areas you give names to containers so that you can reference then and then simply with grid template areas on the container with display grid you can make the layout for example

.div1{ area:nav } .div2{ area:main } container{ display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-area:"nav nav nav" "main main main" }
With this type
of code it becomes easier to make the website responsive as you just have to switch the grid-template-columns and area for a single column layout and its responsive.
example:
container{ display:grid; grid-template-columns:1fr; grid-template-area:"nav " "main" }
Thanks for reading!!

Flex-box as I understand it

Arg85 — Tue, 17 Aug 2021 17:02:41 +0000

Flex-box is like any other concept ,it is not something you can learn/understand just by reading .Unless you write the code yourself and experiment with it you can never understand it.It costed me some time because I was just watching a lot of videos and not writing the code .More you code, more you learn and more you experiment ,more you experiment more you get into errors and when you fix those errors you become what is called a developer.I will try my best to explain how I understand flex-box works.

So first things firsts:
*In order for you to apply flex-box (helps in positioning containers and its elements) you need a container that has some elements.
*To apply flex-box in a container you access with container/div with its class or id and give it a property called display:flex;
*As soon as you do display:flex in a container all the elements inside the container with move into a single row;
As you can see below there is a container that has yet to be applied display flex,you will notice that the container's elements are all in a column .

Now notice what happens if we put a display flex in the container

Now you can notice i applied display flex on the container having the element and all of the elements inside it moved in a row which is a default behaviour of flex-box ,you can change this by applying the flex-direction:column in the container to move the elements back in one column.

This helps in responsive design because some time you want the elements to be in a row and some times in column.
you can also use the change the order by using flex-direction:row reverse and column-reverse which would change the order of the elements inside the container.Take a look below i have given each element a different color so you can notice the difference.

this is after applying flex-direcetion row-reverse,it reversed the order of elements while keeping it in a row ,same can be done with columns as well

If you notice the elements are centered in the above picture which is because of another property of flex-box called justify-content:center what it does is that is horizontally centers the elements and to center the elements we use align-items :center.You can learn about more option you get with them like space-evenly which are also helpful mostly in navigation bars.Below is the align items property picture.

Thanks for reading it so far you can get started with flex-box now.Read more about it in w3school and practice it well.

DEV Community: Arg85

Grid as I know it

Flex-box as I understand it