ADVANCE CSS GRID for WEB/APP FRONTEND
1. Introduction
Let jump straight to the point, if you are here reading this post, thank you very much! and yes, we are on the same both, as a Web/App frontend developer we are constantly facing the problems of how to code a user interface that will render perfectly like the UI Prototype? There are many systems out there that built on top of CSS/JS and packages in libraries of components to help developers ease some pain in web/app UI development.
Today I would like to share with you the glory of a new CSS Grid System that is available for some time now, and developers around the world are talking so much about and so thankful for this new availability in CSS.
2. Why the CSS Grid?
As a UI programmer, I need a better way to code any UI prototype in less time, less code, and as painless as possible.
If I am a development manager, I will try to find tools that help the team reduce the learning curve, improve productivities, having less code to manage, and a system that will produce a better result, working seamlessly with other languages, and cross-platform page rendering. This new CSS Grid system lives up to the expectation.
That is why I am so thankful to learn about the advance CSS Grid System.
To learn more visit W3Schools and the MDN Web Docs
Now, let get right to it!
3. Basic Wireframe
Concept Wireframe Layout
4. Time to Code
Step 1.
To get started, we need a working directory, for example, CssGrid, the index.html file, and the styles.css file, so go-ahead to create a directory:
From command line type the following:
$ mkdir CssGrid
$ cd CssGrid
$ touch index.html
$ touch styles.css
Step 2.
We need a text editor or any code editor of your choice. I am currently using vs code, if you don’t have a code editor yet, or want to give vs code a try download here, it is currently free to use, very popular and powerful.
From the command line, make sure to cd inside the CssGrid folder:
To start vs code type
$ code . Enter
Now from vs code open the index.html file to add the HTML code below
<!DOCTYPE html><html lang=”en”>
<head>
<meta charset=”UTF-8"><meta name=”viewport” content=”width=device-width, initial scale=1.0">
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<link rel=”stylesheet” href=”styles.css”>
<title>New Grid</title>
</head><body><div class=”container”><div class=”header”>Welcome to the Glory of New CSS Grid</div>
<div class=”hero”>Hero Content</div>
<div class=”card-1">Card 1</div>
<div class=”card-2">Card 2</div>
<div class=”card-3">Card 3</div>
<div class=”main-content”>Main content</div>
<div class=”side-col”>Side Bar</div>
<div class=”footer”>
<p>© Chris N.</p>
</div></div></body></html>
The line of code above <link rel=”stylesheet” href=”styles.css”> is the HTML link to the CSS code that will render the page layout, so be sure to include the link.
To learn more about HTML visit W3School and the MDN.
Step 3:
This block of code sets the grid system and basic page width and margin. I have commented on every line of code to make it easy to understand.
/* CSS comment looks like this, you don’t need to type them in your code */
Now open the styles.css file and type in the code below:
.container {width: 90%; /* Set container width to 90% of viewport */margin: 30px auto; /* Set 30px for margin top/bottom */display: grid; /* Activate the grid system */grid-template-rows: 100px 250px 150px 250px 70px; /* Set height for each row */grid-template-columns: repeat(4, 1fr); /* set 4 column, 1fr = 1 faction of 4 */grid-gap: 8px; /* Set grid gap to 8px */}
This block set typography properties for elements inside each box on the grid.
.container > div { /* Set property for all the content inside the boxes */padding: 20px; /* Set padding inside each box */background-color: #1e3deb; /* Set background color for all boxes */color: white; /* Set font color */font-size: 16px; /* Set font size to 16px */font-family: sans-serif; /* Set font-family */text-transform: uppercase; /* covert font to upper case */letter-spacing: 2px; /* Set spacing between letters */text-align: center; /* Center align all text */}
Now set all of the boxes in their positions just like the wireframe above.
.header {
grid-column: 1 / span 4; /* start at column 1 and span across 4 columns */
}.hero {
grid-column: 1 / -1; /* start column 1 and span across screen */
}.card-1, .card-2, .card-3 {
grid-row: 3 / 4; /* Start at row/line 3 end row/line 4 */
}.side-col {
grid-column: 4 / 5; /* Start at column/line 4 end at 5 */
grid-row: 3 / span 2; /* Start at row 3 and span down 2 rows */
}.main-content {
grid-column: 1 / span 3; /* Start at column 1 / span 3 columns */
}.footer {
grid-column: 1 / -1; /* Start at column 1 / span cross the grid */
}
Save the code and check the result.
Thanks for taking the time to code and test this concept, hope this helps!
5. Hint on learning how to code
I took web frontend design and development training, I have completed the course 2 times, meaning I have finished the entire course, coded all of the projects, then take the course again and code all of the projects line by line, then now at the third time on recently, Yes I am rewriting all the code from scratch again. This process helps me because each time I review and recode the projects, I have gained a deep understanding at a much-advanced level on many concepts that I have missed the first time.
This is very common when you are learning anything, the first reading of a book does not give you a full understanding, you only truly gain a deep understanding the second time or the third time, depend on the complexity of the subject that you are learning. That is how to master anything, I did not invent this idea, I had a chance to work for the group surgeons for over 5 years.
This is how an intern doctor becomes a certified doctor because they are being forced to go over their learning materials, a specialist practice, or a technique thousands of times before they can touch a tool or a patient.
Chris N.
My student GitHub
