CSS Grid
Published: 2020-10-26 00:31:16

## Table Of Contents
        
* [What is CSS Grid?](#explanation)

* [What is a Grid Container?](#containers)

* [Properties of a container](#properties-container)

* [Items in a Grid](#items)

### What is CSS Grid <a name="explanation"></a>
CSS Grid is a grid based system that enables the user to simplify the design of two dimensional grid based user interfaces. CSS grid also allows the user to use other similar grid system such as Flexbox. The main difference between the two systems is CSS grid allows two dimensional Functionality. In other words, you can combine rows and columns with CSS grid while Flexbox leaves you stuck with deciding between rows or columns. 
![CSS Grid](https://res.cloudinary.com/practicaldev/image/fetch/s--hRu0qmjc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/ltephanysopez/intro-to-web-dev/master/docs/images/css-grid-layout.png)

### What is a Grid Container? <a name="containers"></a>
```css
.container1 {
  display: grid;
  background-color: rgba(244, 238, 183, 1);
  height: 600px;
  width: 450px;
  margin: auto;
  border: 35px solid rgba(181, 8, 8, 1);
  background-image: url("https://i.pinimg.com/originals/74/6a/1d/746a1d1d26304d1bad22f19f3cc93a51.png");
  background-size: 100% 100%;
  grid-template-rows: 250px 200px 100px 20px;
  padding: 18%;
}
```


Grid container is when the display property is set as grid or inline grid. The grid container is what can be known as the parent which contains smaller grids within. This means it defines properties for the entire grid.

When making this container, we kept in mind that it was to like as much like a holiday card as possible. With that in mind we styled the container to have the card feel by adding a border and a picture with text within that container.

### Properties of a Container. <a name ="properties-container"></a>

`grid template- columns &/or rows`

```css
grid-template-rows: 250px 200px 100px;
  grid-template-columns: 450px 450px;
```
This is from our second and third page of our holiday card. As you can see the rows and columns each have their own size to which we can work with inside the grid! Since this is our Second and third page, we doubled the length of our first container to give it that opened card look.

`gap:` 
```css
gap: 15px;
```
This gap was used for spacing and organization for our card. We didn't want the card to be squished together and hardly readable so we created this gap between each grid in order to keep everything organized.

`display`

```css
display: grid;
```
Display was used in each of our containers in order to allow us to insert our grids.




### Items in a grid <a name="items"></a>

Items in a grid are the children of the container. It defines the properties of individual items of grids like the length, height, area, and position.

#### Grid Item Properties

`grid- column or grid- row:` This is where the grid item begins and ends depending on the number of columns or rows in the grid.

```css
grid-row: 1 / 3;
```



`justify or align-self:` Aligns the grid horizontally or vertically depending on if the code reads either justify (horizontally) or align (vertical). This works on individual grid items.
```css
justify-self: center;
```
We used this to center the items within our containers.


###The Best CSS Grid Holiday Card(Figma)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2ue9wanzv2l182ln8031.png)

###The Best CSS Grid Holiday Card(Web Page)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l8x3zann3qov1vkxoq05.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1w6fx1oi0p0eji9cpgjg.png)

###Conclusion 
In conclusion the holiday card we created used a multitude of elements involving CSS grid. In my opinion I feel this method is much more effective than a method such as flexbox because this makes me feel as if I have more control over my project.