CSS Grid System
Published: 2020-11-04 14:45:00

#What is CSS Grid
- **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.

![Alt Text](https://seesparkbox.com/uploads/article_uploads/cssgrid_flexbox_fallbacks.png)<figcaption>A good example of what CSS Grid is capable of</figcaption>


#Basic CSS Grid Terms
- **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-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.

- **fr**: This is a measuring tool called fraction that allows an element to represent a fraction of the available space in the grid container. This makes the grid more responsive. 


#Steps To Using CSS Grid
1. Make a container using a div. This container would contain all the necessary code for CSS Grid
2. Add display:grid; in your style.css container. This allows you to use CSS Grid in that class.
3. In order to format the grids, use either grid-template-columns: then the size of the grid, or grid-template-rows. 
4. Create the elements that you want CSS Grid to control in the Container index.html
5. All done!!!


![carbon](https://dev-to-uploads.s3.amazonaws.com/i/z5j82lbj7dwzw68lr84j.png)<figcaption>If you want to put 3 grids next to each other that are 20px</figcaption>

#More Complex CSS Grid
- **grid-gap: 20px;**: This makes a 20px gap between the grids.
- **grid-template-column: repeat(5,1fr);**:The repeat makes the specific amount of grids specified in 1 column, 5 in this case, and makes it the specific size specified, 20px in this case. 
- **grid-column-start**:This tells the grid where to start in a column. This also works for rows.  
- **grid-column-end**: This tells the grid where to stop in a column. This also works for rows.  
- **Justify-content**: This allows you to horizontally space the elements. 
- **align-content**: This allows you to vertically space the elements. 

![carbon (1)](https://dev-to-uploads.s3.amazonaws.com/i/1jlq2rzadmyhxpzd2hpd.png)


#Figma Example


![unknown](https://dev-to-uploads.s3.amazonaws.com/i/2j7x5e1hjug13lyw1hhk.png)<figcaption>Before we decided to make the periodic table, we decided to use CSS Grid to make a homepage for a fake Halloween store called City Party.</figcaption>
 

#Making The Periodic Table

![carbon (3)](https://dev-to-uploads.s3.amazonaws.com/i/sjsgw0iuh3c2e5l8t3x6.png)<figcaption>This created the basic periodic table format</figcaption>

 ![carbon (4)](https://dev-to-uploads.s3.amazonaws.com/i/8027yi59l6zsu1sa4fgc.png)<figcaption>To make the long space in the first column of the periodic table. I did this repeatedly for all the spaces I needed. </figcaption>
 
#Final Product
![Periodic-table](https://dev-to-uploads.s3.amazonaws.com/i/ugb03rm3t0tck05y8hat.jpg)
https://css-grid.peteraller.repl.co/