Understanding CSS Grid Systems from the Ground Up

Perfect. Thanks.

Nice article. A fairly complex set of ideas simply explained.

Cheers

The biggest concern with css frameworks is that we now have to explain this kind of basic css rules. For every frontend developer out there it should not be any question how this grid systems are written and how they work. If you don’t know this you should not be using frameworks like this. As you can see in this article it is very simple explaining how grid systems work and it is not of any use to explain it at all. If you read something new in this article you should consider learning css and not trying to understand how css frameworks work…

1 Like

That was a pretty stupid comment. You say as if it was rocket science, css can be learned over a weekend.

I can learn any language in a weekend. Anyone can.

Can you learn the most advanced features of any language in a weekend? No. Yours was just as unthoughtful as the above posters was.

I don’t say CSS is rocket science, and learning CSS looks easy. But CSS has a lot of unpredictable pitfalls. Pitfalls you only know if you are experienced with lots of code and big enterprise software used across all browsers and platforms. I can show you tons of CSS from which you can hardly tell what would be the outcome. For example, did you know CSS isn’t truly cascading?

But my point was that you should know the basics before you start with frameworks like this. And if you know the basics their is no need to explain grid systems. And if you don’t understand grid systems, you should not try to understand them but learn the basics. So if this article was useful for you, go and learn the basics of CSS. Again, their should not be any need to write articles about grid systems…

I think there is no prescribed way to learning a subject. Who cares how you came to learn something, as long as you did learn something.

3 Likes

Because you don’t want to learn how they did it, but why they did it this way.

Why? Are there studies showing the best way to learn something? Or is this purely your opinion based off no sound facts or information that can be proven.

I constantly see people come in here who know certain parts of CSS but not others. Do I agree with that? Doesn’t matter to me. I see those same people come back here months or years later and they all are great developers now.

I look at it in terms of exposure. I read something and maybe I see something I’ve never seen before. From there I do my research to learn about it. But if not for that first article, I would not have been exposed to it. The only thing worse that not knowing something is not knowing about what you don’t know. I view anything that exposes me to something new as beneficial, now matter how I got there.

I largely taught myself JavaScript by looking at various libraries and frameworks that would employ advanced design patterns that were way over my head. I can still vividly remember the day I first learned about the call and apply methods of functions simply looking through the source code of ExtJS. Did I learn anything from ExtJS about call and apply… no, but it did expose me to them.

This doesn’t apply to all program languages? The need of knowing why they do it in a way, and not how they do it? I’ve seen to much copy cats and programmers who do a trick over and over but have no idea what they are doing. This can lead to very odd situations where somebody with knowledge can’t understand what is happening.

And sure, it is my personal opinion. But it is an opinion based on years of experience working in big and small teams for big and small businesses. My opinion is that you can explain every rule of code you write, otherwise you shouldn’t write them at all…

Everyone comes to the first day of a new subject on a different day, we are not already born with the knowledge of CSS Frameworks or Grid layouts (perhaps we should be) what I find interesting is how similar a css GRID is to the good old days of tables… table, tr, td etc… might have to change container, row and column just for old times… and find my faithful friend the 1 pixel transparent gif :stuck_out_tongue_winking_eye:

Speaking of tables… I’m a beginner, so no laughing. I can follow what is going on with the html and css of this article. I was wondering. What if one of the columns is used as a label on a form? I don’t want the label in a “box” like the other columns. How would you differentiate the two columns?

Let me see if I am understanding you correctly, you want to make a <label> element one column and another column that contains a field of some sort for a form? If so, you can make the label element itself a column by adding the appropriate classes. I’m not sure what you mean by differentiate the two columns? You can add a unique id or class name to target a specific column in JavaScript and CSS.

Not by a long shot actually. The biggest problem with CSS grid systems is they push layout rules back into the HTML where it doesn’t belong. CSS was developed to get styling markup out of the HTML, putting it back in via classes is a bit wrong headed. But then there’s the pragmatic side of the coin - it does save a lot of time despite not being ideal.

Also, note the following:

div:after

is wrong. it’s

div::after

The single colon implementation works on IE 8 and the other browsers tolerate it, but the markup is incorrect all the same. Also, floating things around is far less useful than using a proper flexbox model. IE 9 and 10 have a smaller market share than 8 in many areas, so skipping them as well is becoming an option thank goodness.

Hi, See the website http://www.localjobpool.com
I would like to hide the green top bar in mobi
le view.
Staring code of div tag is:

<div id="info">
<div class="menuHolder">
<ul class="nav">
....
....
</div>

menuHolder and nav are defined in my custom CSS. I tried the solution like
@media screen......

like 

@media screen and (max-width: 500px) {
.info .menuHolder .nav {
display: none
}

}

Please tell me how I can hide this bar in mobile view. And where should I insert the code suggested by you…

LOok at your div id="info element. Then look how you are calling it in your CSS.

.info .menuHolder .nav

First off, great article. As for the “CSS in a weekend” comment: learning the correct syntax for a language and knowing how to make it sing are two different things. You can learn the correct syntax for CSS, but that doesn’t mean you know it. I’ve been playing around with it for a decade and am STILL fascinated by the things people do with it. As a backend/DB dev by trade and someone who is fluent in over a dozen different development languages and APIs, I can say that creating with CSS is by far the most personally satisfying work I do, as well as the most challenging. It isn’t anything any code geek should be looking down their nose at.

4 Likes

Great article, thanks for this :smile:

As for the comment about css being so easy to learn that it can be done over a weekend, it really depends what do you mean by ‘learning’. If you mean to be able to do something with it, sure, you can even create your first layout just after having studying css for a few hours.

Now, how about making it cross-browser compatible and responsives ?
How about smart layout that adapt to the content, and doesn’t break as soon as the content is not exactly ‘ideal’ for your layout ?
How about knowing exactly how to combine the different properties ?
Does width: 0 auto works to center horizontally a div without a fixed width ?
How does percentage actually work ? it’s a percentage of what ?
How does background-position work ? does background-position: 25% 25% means the left and top edges of the image will start at 25% of the left and top edge of the div ? No it doesn’t.

Knowing the details and how to combine css properties take time and is definetly not learned over a weekend.

Trick question; width:0 auto; is invalid (you meant margin :wink: ) and also what’s the display type for the div :wink: .