It had been two years and John had no job.
John was a smart 20-something guy. Okay, he had a job — but it wasn’t one he liked. It was too monotonous and was not nearly creative enough. His day job only bored the hell out of him.
The Job Search
For John, it felt as though it wasn’t difficult to learn to code. He taught himself to code, and started looking for the opportunity to leave his boring job — finally.
After a month of futile job searching, he got a call from Sharon.
Sharon was the recruiter for youknowho Inc, an AI startup in the valley.
With a lot of enthusiasm, John blazed through all the hiring process. Guess what the interesting part was?
That call from Sharon.
She asked a couple questions on his background, and John couldn’t wait to share his boring, monotonous typical work day with her.
He tried to tell himself that it didn’t matter if he got the Job. At least, those were the words he muttered as the call ended. “I just had to share how I really felt about my current Job,” he said.
Weeks went by, and it felt like a dream when got himself a job as a junior frontend developer.
And that’s where the story begins.
John meets Khalid and the CSS Grid
Khalid wasn't a DJ.
If he were, then all he mixed was clean code, and not songs.
If you wanted to ruin a nice afterparty, then have Khalid be your DJ. You’d get nothing short of a complete mess.
Khalid wasn't a big fan of songs anyway, but who needs to love music when you’re tech lead at a thriving Startup in the Valley?
As tech lead, Khalid was responsible for the entire development team. This meant more than just dealing with technical issues — it also meant he had to deal with people from different backgrounds.
And that’s a darn hard thing to suceed at. But Khalid excelled not just at being a great technical leader. He had an impeccable relationship with the development team.
It wasn't a surprise that the two got talking almost immediately. Who wouldn't love John?
His broad smiles were enough to light up a tunnel. He just smiled always. Who does that!
Back at the office
Everyone was ready for work.
John entered with a cup of coffee. It was morning, and the office had just started to buzz.
Good Monday morning, eh?
“So, John it is nice to have you join the development team. Was wondering if you were ready to take on a new task today?” asked Khalid
“Hey, boss. I was born ready! ”
That’s John for you. He was born ready — indeed. Happy dude.
“Umm, I need you to set up a new landing page for our new product. And we want it written with the CSS Grid. Ever heard of it?”
“Oh yes I have,” John said quickly.
Learning the CSS Grid
John had no idea what the CSS Grid was.
The only reason he said yes was that he didn't want to look stupid in front of Khalid.
He searched on Medium and found great CSS Grid articles. He read to his heart’s content, and started working on the layout.
The layout John built
John had a lot of experience with Bootstrap.
He was quite familiar with the concept of a 12-column grid. So, with the CSS Grid, the first thing he did was set up a 12 column grid like so:
grid-template-columns: repeat(12, 1fr) “Haha, that was easy,” he thought to himself.
In fact, John did this for every side project he worked on while learning the CSS Grid.
John enjoyed working with the CSS Grid, and he thought it was fun.
He made a few mistakes, and some stuff didn't work as he expected, but he was able to quickly fix the issues.
He knew how to Google things. In this day and age, everyone should.
The meeting with Khalid
“I’ve got it working now, Boss.”
Khalid was excited to see John. They chatted about his experience building the layout, and Khalid went on to take a look at the code.
Well, every layout built with the CSS Grid pretty much begins with the grid definition. So, that was where Khalid looked first.
“Oh, man. There’s something not right here.”
Why did you create 12 columns?
And Khalid began his lecture …
12 column grids are popular in web design today. But the idea behind the CSS Grid is to create the number of columns you need without bloating the layout with columns you don’t really need.
The CSS Grid layout forces you to think about layouts in CSS a little differently than we’ve done for over 20 years.
It is a game changer, one that includes a lot of unlearning.
“A neater approach would have been to create the 2 or 3 columns you needed and just get on with the design,” said Khalid.
“There’s no harm in redefining the number of columns within the media query too. Makes it perfect for responsive design.”
The lesson
With the CSS Grid layout, you aren’t bound to a set number of rows or columns.
You also don’t have to create 12 columns every time. If you don’t need 12 columns, don’t create them. The CSS Grid isn’t another grid based CSS framework.
You’re free.
As pointed out by Per Harald Borgen, you may create 12 columns if you want to experiment with white spaces between columns.
Other than that, create the number of columns you really need, and get on with the design.
Using the CSS Grid layout moves the web forward
I read an answer to why Apple keeps getting rid of things, instead of adding them.
There, I learned this:
“Supporting legacy is not always the best answer. Dropping things helps the industry move forward to adopt newer, better, formats.”
In the same way, choosing to learn and use the CSS Grid advances the web. It helps the industry embrace newer and better formats. It helps us grow as a community. A community we so love, and want to grow.
Be like Khalid. Start using the CSS Grid if you can.
Where possible, invest in a decent CSS Grid education. You’ll be helping to move the web forward.
Want to become a Pro?
Download my free CSS Grid cheat sheet, and also get two quality interactive Flexbox courses for free!
