CSS GRID



So long everybody using CSS GRID, it's been nice knowing CSS GRID.



CSS GRID helps us to make grids in both ways, in column way and in row way CSS GRID is most advanced than Flex-Box. CSS GRID don't make tables. It makes grids.

CSS Grid is an insanely powerful way to build layouts. But because it can do so much (and because most tutorials love to show you all the fancy stuff it can do), learning the basics can feel overwhelming.Today, I wanted to demystify CSS Grid, and show you how to create some simple grid-based layouts with just a few lines of CSS.

CSS GRID Variables



To create a grid with CSS Grid, you specify how many columns wide it should be, and how many of those columns any particular piece of content should occupy. You can also optionally specific the number of rows, and position content very precisely on specific rows, columns, or both.

Some of variables used to specify columns and rows in CSS GRID are shown below:

.grid{

grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;

}


CSS GRID GAP



We can also set grid gap in CSS GRID. To add grid gap there are specific attributes or variables

To add a 10px gap between grid CSS code is shown below:

.grid{
grid-gap: 10px;
}


We can also add grid-gap specific for rows and columns like shown below:

.grid{

grid-column-gap: 20px;
grid-row-gap: 20px;
}


Thanks for reading my blog if you need more blogs like this visit saimportfolio.com

šŸ”„Written by Saim