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:
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:
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
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.
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.
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.
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
Top comments (1)
I published this website using GitHub
github.com/VinayakBector2002/Zoom-...
I think you'll find it interesting