Grid Fundamentals for Beginners
Published: 2021-02-28 15:16:48




## What is Grid?

What is Grid
CSS Grid is a **two-dimensional** grid-based layout system which allows us create any layout we can imagine either small-scale or large-scale as we needed. We can create implicit rows and columns with it. We can build the whole layout of our website in single property and a lot more. So Grid is basically blessing for us developers to build layouts in ease. And it works awesomelly well with [Flexbox](https://dev.to/johongirr/flexbox-basics-for-noobs-4bl3) which is one-dimensional layout module and so they both together helps us avoid the  need to use layout hacks such as tables, float, positioning.  


## Grid Structure

### Grid Container
Grid container is HTML element whose display property is set to grid

### Grid Item
Grid item is direct child element of grid container. And any grid item can also be grid container by setting its display property to grid


### Grid Line
Grid is basically squares that made up from intersection of horizontal and vertical lines. And keep it in mind that  a single column or a single row consists of 2 lines which makes sense
![alt text](https://www.w3schools.com/css/grid_lines.png)



### Grid Cell
Grid Cell is a single unit or a single square that is in between two parallel row and column lines
![alt text](https://images.dnomia.com/ceaksan/css-grid-cell.jpg)


### Grid Track
Grid Track is basically column or row
![alt text](https://i.ytimg.com/vi/0m5qgfX2TVQ/maxresdefault.jpg)


### Grid Area
Grid Area is combination of Grid Cell which is space surrounded by 2 parallel row and column lines
![alt text](https://i.ytimg.com/vi/UFHsuu-74CA/maxresdefault.jpg)

 

## Grid Container Properties


### display
There are two types of grids which are:
* grid - makes element block-level grid container
* inline-grid - makes element inline-level grid container



### grid-template-columns and grid-template-rows
By using this property we create amount of columns or rows we want and the size we want. And it uses following two values to create columns or rows. Never forget for x amount of rows or columns, there will be x + 1 grid lines.
* size of the column or the row - which can be sized with relative units or absolute units or fr unit
* name of the line - we can name grid lines instead of using numbers to place grid items in the grid.


### fr unit
fr unit is basically **fraction of available sapce** on grid container. So after all relative and absolute units are assigned to columns or rows, remainder of available space is assigned to grid item.


### grid-template-areas
We can create the whole layout using this property all we have to do is to inlcude name of the grid areas that grid items given to grid area property. And it has 3 values
* name of the grid area property - which is defined by grid item based on that 
* a dot . - wherever it's used, it leaves that grid cell or grid areas empty
* none - indicates that grid area is not defined in this spot
 



### grid-column-gap
It creates space in between columns and any relative or absolute units can be used to do so
![alt text](https://th.bing.com/th/id/OIP.hbbjr9Kat7lZacKhaPWE1wHaGC?w=193&h=180&c=7&o=5&dpr=1.25&pid=1.7)


### grid-row-gap
This property creates space in between grid rows
![alt text](https://th.bing.com/th/id/Rff271b825a441a1642eb79f07d0c6369?rik=vwkdFsyfd5WEGg&riu=http%3a%2f%2fwww.csstutorial.org%2fcss-grid-row-gap-15.png&ehk=5RDqqIkjR%2fmnIqzH0mKwczjZU2JoPBqffnmi4yusIzo%3d&risl=&pid=ImgRaw)


### grid-gap
Grid gap is shorthand property to use grid column and row gap in single declaration. And if second value is omitted, the first value applies for both sides of the grid items
![alt text](https://1.bp.blogspot.com/-U3rHRyiwlSA/XjonukZGY3I/AAAAAAAAJ_U/-K_pNt8tpIoXKLI_zoYhApo_GdmE0T4mwCLcBGAsYHQ/s1600/css-grid-module.png)


### justify-items
Aligns grid items inside grid cell in main-axis. And when grid items move inside their cells, they only occup width of their content and padding. And it has following values
* start - moves all grid items to the start of the grid cell
* end - moves all grid items to the end of the grid cell
* center - centers all grid items to the center of the grid cell
* stretch (default) - is a default value which makes grid item stretch to occupies all available width of the grid cell
![alt text](https://atts.w3cschool.cn/attachments/image/20170619/t_grid-justify-items.jpg)


### align-items
Aligns grid items in the grid cell in cross-axis. And when grid items moves inside their cells, the only height they have, will be their content and padding. It has following values
* start - moves all grid items to the top of the grid cell
* end - moves all grid items to the bottom of the grid cell
* center - moves all grid items to the center of the grid cell
* stretch (default) - makes grid items occupy all available height of the cell
![alt text](https://zellwk.com/images/2018/simple-form-css-grid/align-items.png)


### place-items
Place items is a shorthand property where we can use jusify items and align items in the single declaration. And if only single value is provided, it will be used as jusify and align items.



### justify-content
Sometimes total sizes of grid might be smaller than the size of the grid container, this happens when size of grid columns/rows are defined with non-flexible units such as px. When this happens you can use justify-content values to move grid items in main-axis (horizontal direction)

* start - moves grid items to the start edge of the grid container
* end - moves grid items to the end edge of the grid container
* center - moves grid items to the center of the grid container
* stretch - makes resize grid items to let grid to  occupy full  width of the grid container
* space-around - creates equal space in between grid items but half of that space in both edges
* space-between - creates equal space in between grid items but no space in both edges
* space-evenly - creates equal space both in between and in edges of grid items
![alt text](https://basicweb.ru/css/primer/758.png)



### align-content
Sometimes total sizes of grid might be smaller than the size of the grid container, this happens when size of grid columns/rows are defined with non-flexible units such as px.  When this happens you can use align-content values to move grid items in cross-axis (vertical direction)

* start - moves grid items to the top edge of the grid container
* end - moves grid items to the bottom edge of the grid container
* center - moves grid items to the center of the grid container
* stretch - makes resize grid items to let grid to  occupy full  height of the grid container
* space-around - creates equal space in between grid items but half of that space in both edges
* space-between - creates equal space in between grid items but no space in both edges
* space-evenly - creates equal space both in between and in edges of grid items
![alt text](https://atts.w3cschool.cn/attachments/image/20170619/t_grid-align-content.jpg)



### place-content
Place content property is shorthand for using justify-content and align-content in single declaration. the first value is align-content and the second value is jusfity-content. And if use only single value, it will be applied to both main and cross axis



## Implicit and Explicit tracks
So columns and rows can be create in 2 ways
1. Explicit tracks which is columns and rows that we awaringly created with following properties
    * grid-template-columns
    * grid-template-rows
    * grid-template-areas

2. Implicit tracks are created for example when you create 3 columns grid but there are more grid items than that. When this happens rows are created implicity to accomadate other columns.

## grid-auto-flow
Wheter implicit rows or columns created controlled by grid-auto-flow property which accepts following values

* row (default) - so this is default value that's why rows are created when grid items exceed created grid columns
* column - and when you set value to column, implicit columns are created. For example if you create 3 columns but there are 10 grid items, they all are placed in single row, creating scroll. That's why default value is row and it should stay in that unless needed
* dense - it fills in holes that bigger grid items created in grid with smaller grid items that come up after grid items those created the holes
**NOTE:** dense only changes visual order but is very bad for accessibility



### grid-auto-row
It sets height of the implicitly created row and the most used way of using it as following
* grid-auto-row: minmax(200px, auto); So here we setting height of the implicit row track to be at minimum 200px and if grid items height gets larger than it height of the row can be as large as it needs to be


### grid-auto-column
With this property we set the width of the implicitly created grid columns and we can use minmax() function as we used in above




## Grid Item properties


**NOTE** - following properties do not work on grid items: float, display: inline-block, display: table-cell, vertical-align and column-* properties have no effect on a grid item.


### justify-self
justify-self property override justify-items property in grid container and  moves grid item inside cell in main axis(horizontal direction). And when moving inside cell width of the grid item will be its content and its padding

* start - moves grid item to start of the cell
* end - moves grid item to the end of the cell
* center - moves grid item to the center of the cell
* stretch - (default) grid item occupies the whole width of the grid cell
![alt text](https://th.bing.com/th/id/Ra62a41d541686960d0f6d11a349a6dc0?rik=h0IPL3Zt%2b98dRQ&riu=http%3a%2f%2fwww.csstutorial.org%2fcss-grid-justify-self-horizontal-align.png&ehk=hoxbN0HwckAmCpndggA%2bA0UoWpcDxyhI0M4PxmSTHAM%3d&risl=&pid=ImgRaw)


### align-self
align-self property override align-items in parent and  moves grid item inside cell in cross axis(vertical direction). And when moving inside cell width of the grid item will be its content and its padding

* start - moves grid item to the top of the cell
* end - moves grid item to the bottom of the cell
* center - moves grid item to the center of the cell
* stretch - (default) grid item occupies  the whole height of the grid cell
![alt text](https://s.7learn.com/uploads/2020/03/align-items-cssgrid.png)


### place-self
place-self is shorthand for justify-self and align-self. if the second value is omitted the first value applies for both directions
 

### grid-area
Grid area property is used for two purposes
1. To specify grid-area-name to be used in grid-template-areas in parent container to layout grid items in grid
    grid-area: header
    grid-area: footer

2. To combine grid-column-start/grid-column-end grid-row-start/grid-row-end into single declaration
    grid-area: grid-row-start/grid-column-start/grid-row-end/grid-column-end
    grid-area: 1 /  1/ 5 / 3


 


### Recommended Resources to Learn

[Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
[Grid at MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)
[freeCodeCamp](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/create-your-first-css-grid)
[Grid Garden](https://cssgridgarden.com/)