CSS Grid has redefined the front-end development and has taken web development to the next level. Let’s go a step ahead from the basics to advanced examples and tweak the front-end HTML elements further with CSS Grid.
What is Grid?
The basic terms associated with CSS Grid are as follows:
All the above terms are explained in the diagram. This diagram shows a 3×2 column grid, which means 3 columns and 2 rows.
Using the above-discussed concepts, let’s build an example layout as shown below:
In the above layout, there are totally 3 layouts: Header, Footer, and Center Sections. The center section is further divided into 3 columns: Nav in the first column, main content area in the second column and sidebar on the third column.
Here is the sample HTML for this example.
<div class="wrapper"> <header class="items">HEADER</header> <nav class="items">NAV</nav> <div class="items contents">CONTENTS</div> <aside class="items">SIDEBAR</aside> <footer class="items">FOOTER</footer> </div>
In the above example, we are styling all the elements inside a wrapper containersContainersContainers make it simple for developers to know that their software will run, no matter where it is deployed and enable microservices. Instead of having one large app, microservices break down apps into multiple small parts that talk to each other.. Further, we’re setting the background color to #ef592b and it varies depending on the brand preferences. The value of the display property is set to “flex” because we need to set the align-items and justify-content properties to center in order to achieve the desired layout. Also, the bottom and right margin are set to 1px for proper alignment.
Next, let’s get into the CSS Grid part of it.
In the above code, you can see the display property is set to grid and that is how a container is converted into grid. Also note that .wrapper * is different from .wrapper.
As we’ve defined the display property to grid, we can now focus on styling the columns and rows using grid-template-columns and grid-template-rows properties. With the help of grid-template-columns property, you can the number columns and the desired width of the column. With the help of grid-template-rows, you set the number of rows and its height.
As you can see from the above example, the first column took 1 fraction of the total columns, the second column took 5 fractions of the total columns, and the third column took 2 fractions of the total columns. A single fraction unit means “one piece of however many pieces we are splitting this into”.
It is evident that the same procedure applies for the rows as well. There are 3 rows and the first row contains the header that takes the entire row across all three columns. The second row takes the nav, contents, and sidebar. Finally, the third row contains the footer and just like the first row, it takes up all the three columns.
Hence, the first and the last rows take up the same amount of height (5 fractions) and the center takes up the rest of the remaining height (20 fractions).
Next, we’ve created a gutter of 10px using grid-gap property and set the height of our wrapper to 720px. You can cross-verify these details using the above Codepen snippet and screenshot.
Further, we can style the header and footer with some properties such as grid-column-start and grid-column-end properties to get the desired results. Using these properties, we will instruct the header and footer to make use of the space available in the entire row. Here’s an example code:
From the above example, it is evident that both the header and footer start from grid line 1 and end at grid line 4. As a result, they take up the entire space available in the entire row and the output is as shown below.
CSS Grid is a powerful way to design the layouts of your web project’s front-end. It works exceptionally well while creating both websites and web apps and helps you get rid of frameworks for the sake of responsive design. Understanding CSS Grid lines, rows, columns, gutter, and cells help with seamless front-end development.
Also Read: CSS Grid Containers
We, at TechAffinity, have expert front-end developers who are capable of handling web projects of any complexity and build intuitive designs. For more information on front-end development and CSS Grid, feel free to send an email to email@example.com or schedule a meeting with our experts.