Blog Post CSS Grid
Published: 2020-10-22 16:16:44

#What is CSS Grid#

-It is used in a CSS file rather than the html file.
-It allows for developers to have grid structures and layouts
-CSS Grid allows for clean spacing
-CSS Grid has many properties that allow for alignment



## *Important Terms* ##

`Grid Elements`- A grid layout consists of a parent element, with one or more child elements.

`Display`- An HTML element becomes a grid container when its display property is set to grid or inline-grid.

`Grid Columns`- The vertical lines of grid items are called columns.

`Grid Rows`- The horizontal lines of grid items are called rows.

`Grid Lines`- The lines between columns are called column lines. The lines between rows are called row lines.

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

`Grid Gaps`- The spaces between each column/row are called gaps.

#####The white line seen between the section of Key Players and description is the `Grid Gap`#####

![Screen Shot 2020-11-02 at 1.52.07 PM](https://dev-to-uploads.s3.amazonaws.com/i/8ctyi2pbvhcv9mku1fn2.png)

`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`- Defines the height of each row. The `grid-template-columns` 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. If you want your grid layout to contain 4 columns, specify the width of the 4 columns, or "auto" if all columns should have the same width.

Throughout the development of our website we used the `grid-template-columns` property in order to correctly organize the features of our site. 

# **SIMILAR TO FLEXBOX** 

`justify-content`- The justify-content property is used to align the whole grid inside the container.
`align-content`- The align-content property is used to vertically align the whole grid inside the container.




#*Figma Example*

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

When designing our website we decided we would layer the website in categories beginning with the NFL transitioning into high school football and finishing off with local turkey bowls. We used CSS Grid to space out our writing to match evenly with the images. My partner and I designed the figma model and made changes to our website as needed. Throughout the design process we came upon issues of alignment and spacing, which were solved using the `grid-template-columns` property.  

##Our Website##

When creating our website we used CSS Grid in order to align our text with our images.

To begin under our Navbar we used CSS Grid to give our websites heading a box look as seen below. 

![Screen Shot 2020-11-01 at 7.22.24 PM](https://dev-to-uploads.s3.amazonaws.com/i/ov0d6hs11yjuc7i3slqo.png)
 
We styled this in our CSS file. 
We used Grid-Template-Columns to structure the website this way.

```css
.title{
display: grid;
grid-gap: 10px;
background-color: white;
padding: 10px; 
}

.title > div{
background-color: orange;
text-align: center;
padding: 20px 0;
grid-template-columns: (auto,1, 2fr);
}
```
 
As we continued to work on the website we used CSS Grid to space out our opinions on each section. As seen below.

![Screen Shot 2020-11-01 at 7.36.09 PM](https://dev-to-uploads.s3.amazonaws.com/i/aod81n2t89b6aul3we8j.png)
 
We used CSS Grid in our CSS file. As seen below.

```css
.grid{
display: grid;
grid-gap: 10px;
background-color: white;
padding: 10px;
}

.grid > div{
background-color: orange;
text-align: center;
padding: 20px 0;
font-size: 20px;
grid-template-columns: repeat(3, 1fr); 
```

#####CSS Grid allowed us to align our text with our images and separate our sections accordingly.#####