CSS Grid Blog Post

CSS Grid Basics

The CSS Grid Layout is a 2-D grid-based layout system that is mainly used to layout web pages. CSS Grid is very popular for web page design since it uses rows and columns and does not require having to use floats and positioning.

Definitions

• Grid Elements- A grid system contains a parent element as well as child elements. Ex: <div class="grid-container"> <div class="grid-item">1</div>
• Display Property- A specific HTML element will become a grid container when its "display" property is set to grid in CSS. Additionally, all children of the grind container become grid items. Ex: .grid-container {display: grid;}
• Grid Columns/Rows/Gaps- The grid column is the vertical line of the grid, the row is the horizontal line, and the gap is the space between each column and row. Ex: grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 200px; grid-gap: 50px;
• Grid Container- Grid containers "contain" grid items, which are found inside columns and rows. Ex: .grid container {display: grid;}
• The Grid-Template Columns Property- This property defines the number of columns in a given grid layout, and it can define the width of each column. Ex: .grid-container { display: grid; grid-template-columns: 80px 200px auto 40px; }
• The Grid-Template Rows Property- Similar to the columns property, the rows property defines the number of rows in each layout, and it can define the height of each row. Ex: .grid-container { display: grid; grid-template-rows: 80px 200px; }

Below is a sample grid container I used which includes columns, rows, gaps, padding, and height.

#childCostumeGrid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 300px 300px 300px 300px 300px;
  grid-row-gap: 50px;
  grid-column-gap: 40px;
  padding: 20px 80px 20px 80px;
  height: auto;
  background-color: black;
}

Figma Example

This image below is the sketch of the website that my partner and I are going to work on. It is essential that you map out your plan of action before you execute it, it really helps!

CSS Grid Sample Website

In this sample website, my partner and I utilized CSS Grid to create a website for costume shopping.

First, we inputted a navbar to give our website a heading where users can click on "Adult", "Teen", or "Child" to view the costumes within each category.

Next, we used CSS Grid on our homepage to separate the categories of each costume type into Adult, Teen, and Child into a grid container.
Code:

#buttonGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 345px 345px 345px 345px 345px;
  grid-row-gap: 50px;
  grid-column-gap: 40px;
  padding: 20px 80px 20px 80px;
  height: auto;
  background-color: black;

Outcome:

Finally, in each adult, teen, and child section of the website, we used CSS Grid to space out the costume options within each category. Furthermore, within each grid container we used a #am ID to import an image of a costume. This way, the layout of the page looks like a selection of costume choices with 3 rows and 3 columns of costume choices per category simply by using CSS Grid!
Code:

#adultCostumeGrid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 345px 345px 345px 345px 345px;
  grid-row-gap: 50px;
  grid-column-gap: 40px;
  padding: 20px 80px 20px 80px;
  height: auto;
  background-color: black;
} 
#am1 {
  background-image: url('Images/am1.jpg');
  background-size: cover;
}

#am2 {
  background-image: url('Images/am2.jpg');
  background-size: cover;
}
#am3 {
  background-image: url('Images/am3.jpg');
  background-size: cover;
}

Outcome:

Overall, CSS Grid allowed us to align and separate images and containers with ease, and makes a rather complex website making process into a simple one. With a little practice, you can make your own website while utilizing CSS Grid to make it pop while making it look organized!

Sources:
https://costume-emporium.cadenserrato.repl.co/adult.html
https://css-tricks.com/snippets/css/complete-guide-grid/
https://www.w3schools.com/css/css_grid.asp