CSS Grid - A Better way to style your web page

CSS Grid is one of the modern way to write and design webpage. CSS Grid can do such things that Flexbox can't. In this post you will learn some of the basics as well as some advanced CSS Grids tips and tricks to get familiarity about it. So lets get started! 😍😍😍

Making a div/section/main/ or any other block level element as display grid will not work as it is we have to specify with ROWS and COLUMNS with it. Like this:

div {
  display: grid;
  grid-tamplate-columuns: 500px 500px 400px;

}

grid-tamplate-columuns: 500px 500px 400px; This line will brake that div element into 3 separate columns in size 500px 500px and 400px. A better way to write unit in grid is fr.
if you want 3 columns same size then just write
grid-tamplate-columuns: 1fr 1fr 1fr; or in short you can use repeat function grid-tamplate-columuns: repeat(3,1fr);
or if you want make rows you can use grid-tamplate-rows.
If you want to make dynamic rows or column you can use
grid-auto-rows / grid-auto-columns followed by the size of that row / column. It's very easy isn't it?😃😃

Now you have created a grid and make some rows or columns now you have to give some gaps or space between the rows or columns don't worry css grid got you... Just use grid-gap or short hand gap property and followed by how much you want to give Thats it....

Now you may want to place items inside the grid... like you may want to shift a p tag or any you can use align-items / justify-items.
Always remember align-items or justify-items will work on parent element only means which tag you have made grid.
If you want to reposition the child element with tagging that element you have to use align-self / justify-self.
The short hand of this can be place-self or place-items;

The other common term is grid-column-start, grid-column-end, grid-row-start, grid-row-end which is related to positioning of the each of the row or columns.
Determines a grid item’s location within the grid by referring to specific grid lines. grid-column-start/grid-row-start is the line where the item begins, and grid-column-end/grid-row-end is the line where the item ends.

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

syntax can be reduced to grid-column or grid-rows respectively.

There are many property that css grids provides us but we need some of them above properties are most important among them.

Thank you🌺🌺

You can learn more about css grids from MDN Css grids page or CSS tricks . com page they are awasome resourses.