DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for CSS Grid
CadenCGS
CadenCGS

Posted on • Updated on

CSS Grid

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

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

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

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

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

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

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)

Collapse
 
vinayakbector2002 profile image
Vinayak Bector

I published this website using GitHub
github.com/VinayakBector2002/Zoom-...
I think you'll find it interesting

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›