Everything to know about CSS Grid!

#gridlayout #gridelement #columns #rows

Hello Enthusiasts of the Computer Science World!

What is CSS Grid?

CSS Grid is an element in the world of CSS that seem to appear out of nowhere and gain popularity rapidly, which makes us think what is the reason for this exposure? As we are used to these kind of things in the web development world, many of us end up being skeptical about trying something new and seeing how things really work.

My personal background starting with Css-Grid was in a school project, we had to in about a week or less create a website making full use of this new engaging property. As my typical luck in school I messed up the whole project and only to realize it was the last day to turn it in. Recalling this memory from the back of my head to make sure my fellow coders don't give up as we know coding can get stressful, however the outcome is worth the suffering. Furthermore, I started with my project, first you would most likely want to start with knowing that Css-Grid as you can guess is a css property element. If you want to code your whole website with Css-Grid I suggest doing something like this body{ display:gird; }, this makes our whole body of the website take the property of the grid system. From here I provide you the resources and definitions with examples necessary to create your website remember you do NOT have to use all to make your website responsive and successful, good luck and do not fear the unknown!

Important Definitions

Grid Layout- This is a way to divide a page into major region or sections, or a way of customization in terms of size, position, layers. Like a table, the grid layout enables the creation of columns and rows. However it makes it simple because you dont have to imply floating or positioning.

Grid Container- In CSS using the grid-template-rows and grid-template-columns defines how many rows and columns there will be, also adjust the width and height, however you would also put a container div element in CSS like this.

<div class="container">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
</div>

Grid Item- A grid container contains grid items, by default it has one grid item for each column, in each row, but you can obviously style this and change it, the items would be the span elements on the example ontop.

Grid-Template-row- CSS property defines the line names and track sizing functions of the grid rows. (Try using fr as sizing it makes it simpler its about same thing as saying 20% but facilitates when trying to change sizing. )

Grid-Template-column- CSS property defines the line names and track sizing functions of the grid columns.

For Template-Columns and rows it would be best to apply something like this to the body to apply sizing and Css Grid to your whole page:

/*Play with the fr to get spacing */
body{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    min-height: 100vh;
}

How we can implement this in our daily coding!

Explanation

Many are more visual learners therefore, I myself created a Halloween themed website layout making the use of the CSS grid. It would be best to first do a simple layout like this one to then put content inside of it. Making these sections such as a nav, hero section, gallery, and footer will facilitate a lot of things and make your website look professional. Using all the definitions seen above I made this possible and you can too try it out yourself here are a few guidelines and always remember to stay positive and do great!

Html