CSS Grid Blog
Tags: css, webdev, startup
Published: 2020-10-26 00:55:56

## What is CSS Grid?

CSS Grid Layout is a two-dimensional grid-based layout system. CSS grid is used to lay out web pages. Grid is the very first CSS module created to solve the layout problems people have all been coding around. Grid comes with a powerful auto-placement algorithm, which makes it easier to fill up available space. Grid was created to be very flexible and provide solutions for many different cases, and it is not something that we can just pick up and use in a day. 

## The Basic Elements

1. Columns
2. Rows
3. Cells
4. Grid Lines
5. Gutter/Gaps

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ebuvijjqx3t9vsivdvm6.png)

## How to Use CSS Grid?

1. Create a container div that will contain all grid elements.
2. Add `display: grid` in your style.css container. 
3. Add `grid-template-columns:`, then the size of the grid (You can also use `grid-template-rows`)
4. Create the elements that will go within the container div.
5. You're done!


##Tips While Using CSS Grid 

1. Add specified sizes for all of the grid items using a `grid-item class` as well as setting `width: px` and `height: px`.
2. Add grid padding between grid items using `grid-column-gap: px`, `grid-row-gap: px`, and `grid-gap: px`.
3. Change grid column width by changing the auto's at the end of `grid-template-columns`.
4. Use `justify-content` to horizontally space the elements as you may please, such as `justify-content: space-evenly`.
5. Use `align-content` to vertically space the elements as you may please, such as `align-content: center`.

## Making Grids While Not Using `display: grid`

1. Make each element that is non-uniform have a unique class, such as `item1`, `item2`, `item3`, etc.
2. Define the Number of columns for elements to span using `grid-column: 1 / 3` or `grid-column: 1 / span 3`.
3. Number of rows for elements to span using `grid-row: 1 / 3` or `grid-row: 1 / span 3`.
4. For the most precision, define the entire area using `grid-area: 1 / 3 / 3 / 4`, where the element goes from row 1, col. 3 to row 3, col. 4.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u7bspqg1ux0tkaeufp6q.png)

## Figma Examples
Figma can be used for many different website ideas and templates. It helps us create layouts that can be redefined and reshaped. It can be used for a Halloween Costume website template or even an evil periodic table.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iioui6a3a42i29mcs8vl.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kq41v1oaowfy40uxusmz.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lgepwrbn4bqkvbfbmysx.PNG)

## CSS Grid Example
After using figma to make a website template, you can use CSS Grid to make the template come alive!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r9qy4jd8432dilj3kj84.png)

https://css-grid.peteraller.repl.co/

## Use of CSS Grid In Example
To format the example above, we made each space and used CSS grid to align the spaces to their appropriate locations. We repeated this for all of the spaces that were needed:
```html
<div class="element zone noble" style="grid-column: 18;">
			<div class="inside">
				<div class="title ">He</div>
				<div class="desc">Helium</div>
			</div>
		</div>
```

The CSS elements created the basic periodic format:
```CSS
.periodic-table{
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(18, 1f);
  justify-content: center;
}
```

## Conclusion

CSS grid is an amazing tool all web developers should take advantage of. Knowing the basics of CSS Grid is only half of the practice, the other half comes from actual usage in a website. CSS grid uses a very simple way for people to visualize formatting elements. CSS grid is useful for formatting the basic structure of any website. I hope everyone becomes comfortable and interested in CSS grid. After knowing that CSS grid is so useful, I can't wait to use it! 

## Definitions
**CSS Grid**: 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.
**Grid Elements**: A grid layout consists of a parent element, with one or more child elements.
**Grid Columns**: The vertical lines of grid items are called columns.
**Grid Rows**: The horizontal lines of grid items are called rows.
**Grid Gaps**: The spaces between each column/row are called gaps.
**Grid Lines**: The lines between columns are called column lines. The lines between rows are called row lines. 
**Grid Container**: To make an HTML element behave as a grid container, you have to set the display property to grid or inline-grid. Grid containers consist of grid items, placed inside columns and rows.
**Grid-Template-Columns**: The grid-template-columns property defines the number of columns in your grid layout, and it can define the width of each column. The value is a space-separated-list, where each value defines the width of the respective column.
**Child Element (Items)**: A grid container contains grid items. By default, a container has one grid item for each column, in each row, but you can style the grid items so that they will span multiple columns and/or rows.

## References 

https://gridbyexample.com/examples/
https://www.w3schools.com/css/css_grid.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
https://css-tricks.com/snippets/css/complete-guide-grid/
https://www.freecodecamp.org/news/intro-to-css-grid-layout/
https://developers.google.com/web/updates/2017/01/css-grid
https://learncssgrid.com/