CSS Grid
Published: 2020-10-22 19:26:55

##**_Introduction_**

CSS grid is a useful tool to help you and your team create more organized and good-looking web pages. It can be used in a variety things from listing and showing organized content to creating the layout of a page. Here is a prime example:

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

##**_Planning_**

When starting out on a web page planning is the most important thing. There are many programs that will let you plan out a web page, one of those is called Figma. Figma uses a variety of tools to help you design and plan out web pages both solo and in a group with ease. Here is an example of a Figma layout for a costume purchasing website: 

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

There are many different parts of a Figma that can be seen in this image. One of the most important things to note is the arrows leading from one page to another. These shows the anchor `<a>` tags leading from one page to another.

We are also able to connect our **_Terms and Vocabulary_** section to the planning phase to help us understand the different parts of CSS Grid. The Entirety of the costume area can be identified as a **Grid**. The spaces between the different costumes is known as the **Grid Gap**. 

Each set of costumes can be organized into rows and columns. The set of costumes grouped left to right can be identified as **Columns**, and in this case is set with a a code `grid-template-columns: 1fr 1fr;`.

Here we can see another reference to our vocab sheet with the use if the units **fr**, meaning fractions, so our grid is evenly divided between two fractions. 

By looking at the Figma we also see we have three **Rows**, which can be identified as the set of costumes which can be grouped up and down. In the Figma our rows can be setup with the code `grid-template-rows: 1fr 1fr 1fr;`. 

This should have us set up at a perfectly spaced grid displaying 6 **Cells**, or costumes.

##**_Building Stage_**

When starting on the actual coding of the project, we wanted the cover picture of the website to blend well with the page. We used a simplistic color scheme and blended an orange and black picture of jack-o-lanterns to a black body, making a smooth transition between the cover and the body.

We decided to make our landing/home page a link to three other pages, so that the website in its entirety is more organized.

##**_Home Page_**

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

Here you can see a picture of our website, The Costume Emporium's, home page. More specifically you can see the grid we used to layout the three buttons that take you to the different pages where you can buy costumes.

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

When making our grid for the buttons, this is the code that we used. We start off by using `display: grid;` to enable us to be able to use CSS Grid within this div. Some of you might be wondering why we used **fr** for the `grid-template-columns` but not `grid-template-rows`, this is because we haven't specified the height of our grid div yet, but we don't want it to last the full page. Therefore we only sized our row to `200px`, because it gives us that nice rectangular shape.

As for the rest of the code segment, between `grid-gap`, `padding` and `height`, we just use this to refine and contain the shapes of the cells.

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

Throughout that last block of CSS, we specified all of the sizing and dimensions for our cells, but we haven't actually made anything inside of these grid cells yet until now.

To start off you can see that we use `height: 100%` and `width: 100%`. If you're wondering why, this is because by specifying both width and height tot be 100%, we are not sizing it so bee 100% of the page. we are sizing it to be 100% of the grid cell. This creates ease in the future, in case you ever need to adjust grid cell size, you can adjust all three at once by editing the grid rather than each individual cell.

The remaining code of the block serves to organize the text touch of the text inside of the cell. 

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

this picture shows the code for the cells within the `index.html`. The `<a>` tags is what makes each div act as a link/button to the separate pages.

##**_Costume Buying Pages_**

When we began programming the costume purchasing pages, we wanted to keep the same theme as the homepage, including the navbar and cover image. The content was the main thing being changed.

--Currently Editing Here--

##**_Review_**

####Terms and Vocabulary

**Columns:** Columns are the groups of cells within a grid that run along the horizontal axis

**Rows:** Rows are the groups of cells within a grid that run along the vertical axis

**Grid:** A framework of spaces sections called cells made up of intersecting rows and columns

**Grid Cells:** A singular box made from the intersection of a row and a column

**Grid Gaps:** The spaces between each cell in the grid

**Grid Area:** The section of a grid taken up by content that covers more than one cell

####Code Syntax

`display: grid:` This enables you to be able to use grid within the CSS you modify this with

`grid-template-columns:` This lets you assign the specific sizes and amounts of columns in your grid

`grid-template-row:` This lets you assign the specific sizes and amounts of rows in your grid

`grid-gap:` This lets you assign the size of the gap between the cells in your grid

`grid-area:` This lets you be able to span one bit on content across multiple cells at a time

`grid-column-start:` You can use this CSS modification to assign the start of content in a column on your CSS grid

`grid-column-end:` You can use this CSS modification to assign the end of content in a column on your CSS grid

`grid-row-start:` You can use this CSS modification to assign the start of content in a row on your CSS grid

`grid-row-end:` You can use this CSS modification to assign the end of content in a row on your CSS grid

`fr:` A unit used in CSS Grid identified as fraction, for spilling your page into even fraction when making the columns and rows of your grid