9 Biggest Mistakes with CSS-Grid

Recently I started watching Jen Simmons videos about Web-designing and CSS and layouts. This wonderful lady is very brilliant with knowledge and sharing information about the web. Therefore, to all the web designers right now who are reading this article, I strongly request to watch her videos on CSS and web development.

Now, I have made a lot of mistakes or assumptions on the CSS grid and therefore I thought to share with all of you about the learning which I got from her, through one of her videos, I will share that link at the end of this article. 🤝🤝

Here, we go:

9 Big Mistakes/Assumptions with CSS- Grid

9 Big Mistakes/Assumptions with CSS- Grid

1. CSS-Grid is Everything :

CSS grid is everything

• Grid and Flexbox are almost similar.
• Both are the parts of the CSS itself.
• Sometimes, even float is also the better option in the case of CSS shapes or for the content flow around other content

2. Using only percents for sizing:

Using only percents for sizing

• In responsive web-design world, making the size in percentage does not make sense.
• We have to make different options for sizing
• Nowadays, certain things are fixed and other things are flexible enough to change their shape
• 5 years from now, we are not going to set the columns and rows in percentage

3. Assuming you need breakpoints:

Assuming you need breakpoints

• ‘min-max’ syntax or ‘repeat-autofit’ or ‘repeat-autofills’ will save your time from writing media queries
• We don’t need breakpoints all the time,
• Instead, learn how to create layouts that react to size of the content and move things around as needed.

4. Getting confused by numbering:

Getting confused by numbering

• Numbers in the grid system doesn’t refer to columns, they refer to the lines.
• In simple words, 4 column layout actually has 5 numbers or 5 lines
• Always remember: “Numbers are the lines”

5. Always using 12-columns:

Always using 12-columns

• Earlier: 1-col grid for mobile, 4-col or 8-col grid for tablets, 2-col grid for desktop. It doesn’t have to be that way (now)
• Earlier it made it much easier to do the maths as it was hard to do when we need to divide everything using percents and floats. Now computer can do the maths.
• Therefore, now we can quickly make 11-col or 13-col grid
• Also, we can constantly changing the grid layout around and breaking it up.

6. Ignoring the power of Rows:

Ignoring the power of Rows

• CSS grid allows us to define rows also.
• By default, rows are set as auto-height that means, it is going to be the height of the content
• Always explore sizing in a vertical direction as well.
• Setting the height of the row to auto makes the content fit nicely even when it shrinks.

7. Reaching for a framework:

Reaching for a framework

“People are searching high and low for a new framework to replace their old framework, where the new framework just happens to be built in CSS-Grid.” — Jen Simmons

• Create your own vanilla CSS and create a custom flow, a custom style guide or a custom style system.
• You don’t need a framework, you yourself can write this code.
• Learn and master Grid.

8. Waiting for Internet Explorer 11 to Die:

Waiting for Internet Explorer 11 to Die

funny gif

• We have assumed that we can’t use CSS_Grid on IE11.
• There are plenty of ways to write progressively enhanced CSS that works in every browser.
• Grid is now supported in over 80% of the browsers that are in use.

9. Hesitating, Instead of Playing:

Hesitating, Instead of Playing

• Best way to learn Grid is to not work on something for work that is in deadline.
• Rather find some kind of inspiration out in the world.
• Old posters, paintings, or anything can be an inspiration.
• Dare to experiment.

And here is the video: 👇👇

video

I want to end this article by dropping one basic or informative quote which I found very subtle in the field of web development:

“You should start by making your page work with just HTML, before adding anything else like CSS and JavaScript. This is because HTML is the most resilient layer… Should the CSS or JavaScript fail, the HTML will still render correctly.” — Jen Simmons

I really hope, this article was helpful for you and you learn something cool.

Thank you for your time and please feel free to correct me, if somewhere I have made it wrong or incomplete. Do encourage me to write more by clapping. Comment down your thoughts, your disagreement, your appreciation, anything.
Keep up the great work and more power and love to you.

Thank you! 🙌🤝
— GareebCODER 👩‍💻

📌 Do follow me on Medium, Twitter.

Don’t forget to follow The Lean Programmer Publication for more such articles, and subscribe to our newsletter tinyletter.com/TheLeanProgrammer