GRID in html....

#html #css #grid

GRID in html: -

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

First of all we have to use parent element and then add child to our basic structure of html. There are number of tags under grid such as: -

gird-template, dispay:grid, grid gaps, grid lines, grid container, align content, grid items, grid row span, grid column span, grid area and many other so let us discuss these: -

1; grid-template: - it is used to tell css about the number of columns you want.

As you can see in the above picture how to use grid- template:- we can also use grid-template-row in a similar way. But when you run this code you will find outcome in a simple manner without any column, like this: -

This is just a simple representation why this happens because we didnot use display: grid which a very important property.

As you can see in the above picture right side is our code as we texted display: grid you can find your output in the form of columns, if you noticed then in the above picture 1,2,3...8 are arranged in columns for more clarification, let's add background color and border to the css.

Here is our next code and you can see the numbers properly now.

Hope you got this and now we will proceed this further soon. Thank you.